I'm currently using the following:
http://jsfiddle.net/0mLzseby/469/
To make my sidebar follow down the page. I have quite a large footer though and I'd like the div to stop when it gets to the footer rather than to keep scrolling.
The code I currently have is:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
You can check if you've scrolled down to the footer, then remove the
stick
class:(you could combine the if to remove the duplicate .removeClass, here for demonstration)
However, with your css you get a nasty 'jump' around when you start scrolling - in your fiddle, the right content appears below #sticky then when you stick #sticky, the right content jumps to fill the gap. Using the code above, you'll get some race-conditions as the offset() moves when it fills/unfills the gap.
To fix this gap, just add a
float:left
to your #sticky css.Updated fiddle: http://jsfiddle.net/0mLzseby/472/
I suspect you would like to go one step further and, when you get to the bottom, the div then starts to scroll with the page. You can do this by adjusting the 'position:fixed' top of
.stick
. Don't forget to reset it when not below the footer:The padding just makes it start scrolling in a more natural place - you can probably get this from other css attributes such as margin and padding of the other components.
Updated fiddle: http://jsfiddle.net/0mLzseby/473/
You forgot to add class, if we are in the footer, and refrech the page, then, the sidebar won't show :
You can check if you've scrolled down add the sticky class and when you've scroll on footer and header area it will be remove sticky class