Develop Reference

Set scroll position back after changing element position fixed and unfixed

I have a JSBin with a page, and a functional sliding nav. The only thing wrong with it is that it resets the scroll position when I open the side navigation. I use a jquery click event to toggle the nav and move the page to the side. When it moves the page over, it sets the position fixed, and moves it over 200 px. I have tried to use jquery to record the scroll position before the nav is toggled, and set it back when it isn't fixed, but after trying to use other examples, they won't work. I don't know if there is something wrong with my script, or I could use css another way.
The JSBin is here
I would like to not introduce anything but html, css, js, or jquery in the answer.

This worked for me:
Javascript:
$('.c-hamburger').click(function(){
if($('.nav').css('width') == '0px'){
$('.nav').css('width', '200px');
$('.body').css('margin-left', '200px');
}else{
$('.nav').css('width', '0px');
$('.body').css('margin-left', '0px');
}
});
CSS:
.nav{
width: 0px;
transition: width 0.5s;
overflow: hidden;
}
.body{
transition: margin-left 0.5s;
}
center{
min-width: 200px;
}

Submenu go away from menu when scroll page

I have a problem with position of submenu, when I open page submenu is positioned well but problem is when I scroll page and than try to open submenu it is out of position.
live demo
.has-sub.parent .wrapper {
position: fixed;
z-index:500;
}
I know that this problem is caused by use of position:fixed but if I try to change that than submenu is shown behind content div, I tried to fix that with z-index, but it didn't help, any suggestion would be great.

To be honest your fiddle is a bit of a mess... You can't use a fixed position for your submenu. You should use "absolute" position.
I add this to your CSS to modifed a bit all your nav bar:
.horizontalni li {position:relative;}
.navigation {z-index:100; ;}
.has-sub.parent .wrapper {position: absolute;}
.horizontalni {overflow:visible;max-width:100%}
body {margin:0; padding:0; overflow:hidden;}
and here you have your modified example: http://jsfiddle.net/gtw781sv/1/
Hope it can help you a bit.
Edited: change overflow:hidden to overflow:auto in "body" if you want to check it with scroll-bars

Hi Check the demo here
http://jsfiddle.net/adarshkr/gtw781sv/4/
Changes done in CSS
.horizontalni .has-sub .has-sub1 .wrapper{left:100%} /* Updated code */

JS Menu sliding (always jumps to top of page)

I created some sliding menu and all works great without one small problem. When I slide the menu, I'm automatically transported to the top of page (the slide effect works good, but why I'm transported to the top of page when I try to open the menu, when I scrolling page, when I'm not of the top?)
Position of the menu is fixed, so I can slide it when I'm in the center of page, for example.
So in short: I want to slide my menu without automatically jumping to the top of page (when I do it).
Code of js:
<script>
jQuery('.arrowleft').click(function () {
jQuery(".other_sidebar_background").css("display", "block");
jQuery(".other_sidebar").toggle("slide");
});
jQuery('.back_sidebar').click(function () {
jQuery(".other_sidebar").toggle("slide");
});
</script>
My menu is showing when I click image in .arrowleft div (and hiding when I click image in .back_sidebar div). .other_sidebar_background and .other_sidebar it divs of my slide menu.
.other_sidebar {
z-index: 999999 !important;
display: none;
background: rgba(21,21,21,0.98);
z-index: 9999;
height: 100%;
position: fixed;
width: 270px;
padding: 10px;
}
.other_sidebar_background {
display: none;
background: #2c2c2c;
}

The divs (back_sidebar and arrowleft) were between tags and the link "#" caused the problem.
I fixed it by changing the <a href="#"> to <a style="cursor: pointer;"> (I wanted a cursor link).

How to make lightbox scroll the lightbox and not the page

I am using the lightbox_me jquery plugin to open a lightbox when a user clicks on a product. Often the lightbox content stretches below the fold, and at the moment the right scrollbar moves the entire page when you scroll down.
I'd like it to work like the pinterest lightbox, whereby the right scrollbar only scrolls the lightbox, and the rest of the page stays fixed. I've seen a few posts on this, but nothing seems to work for me.
jQuery(function(){
$('.productBoxLink').click(function(e) {
var box = $(this).siblings(".productLightboxContent").html();
$('.lightBox').lightbox_me({
centered: false,
modalCSS: {top: '50px'},
onLoad: function() {
$('.productLightbox').html(box);
$('.productUpdateInner').show();
},
onClose: function() {
$('.productUpdateInner').hide();
}
});
return false;
});
});
.lightBox {
width: 450px;
background-color: #fff;
top: 400px;
position: fixed;
padding: 30px;
text-align: center;
display: none;
clear: both;
-moz-box-shadow: 0 0 5px #5C5C5C;
-webkit-box-shadow: 0 0 5px #5C5C5C;
box-shadow: 0 0 5px #5C5C5C;
border-radius: 5px;
}
I've read that this can be done with a few changes to my CSS. Does anyone know how I can achieve this with the code shown? Thanks!

Add this to .lightBox:
height:600px; /* You need to set a specific height - px or %*/
overflow-x:scroll; /* Tell the container to scroll if the content goes beyond bounds*/
Update
width:100%;
overflow-x:scroll;

If you want to let it size larger than the viewport, it's most likely because of your position: fixed line. Change it to position: absolute and you should be good.
Both fixed and absolute take the element out of the document flow, so there should be no net change in how it presents, but fixed fixes it to that specific position and forces it to not move ever.

I guess a general answer would be to make the background of the lighbox (i.e. the content before lightbox; the main content wrapper) position: fixed; and adjust its top value with javascript to a negative value corresponding to the position of user scroll in the moment of lightbox opening. Besides that, the lightbox would need to be position: absolute; with the same top / left values as if it was fixed.
When the user closes the lightbox, the previous values would need to be restored.

Add to html a class when lightbox is opening. For example:
.lightbox-active{overflow:hidden}
Also, your lightbox should have the next style:
.lightbox{overflow-x:hidden;overflow-y:scroll}
When you close the lightbox, you have remove the lightbox-active class from html.

Off-canvas / viewport navigation slide in with jQuery

I am trying to make an off-canvas navigation that slides in from the left to take up 20% of the page while the content slides to the left ( some of it will be off canvas ) taking up 80% of the page.
This has been seen in Google's mobile site and Facebook's mobile app.
Here is a version using CSS3 Transitions: http://codepen.io/chriscoyier/pen/umEgv
Except, I am trying to make one that relies only on JQuery / Javascript and not CSS Transitions at all.
Below is a link to what I have so far.
I don't understand why it is not working. The width of the #main-nav should be toggled every time .menu-button is clicked; thus creating a sliding tot he right effect.
Can someone please help me fix this and / or help me with that I am trying to achieve.
Here is what I have so far: http://pastebin.com/0X7uT7tC

Changed width to 20% in css and then hide this on load.
HERE IS FIDDLE
jQuery
$('#main-nav').hide();
$('.menu-button').click(function () {
$('#main-nav').animate({
width: 'toggle'
});
});
CSS
.main-nav {
position: fixed;
top: 0;
width: 20%;
height: 100%;
background: #3B3B3B;
overflow: hidden;
}