Skip to content

Instantly share code, notes, and snippets.

@zainaali
Last active February 22, 2018 21:07
Show Gist options
  • Select an option

  • Save zainaali/9bd34a5285f39003f19084909dc94814 to your computer and use it in GitHub Desktop.

Select an option

Save zainaali/9bd34a5285f39003f19084909dc94814 to your computer and use it in GitHub Desktop.
Make sidebar scroll able along with page and stop at footer
(function($) {
//id of sidebar
var element = $('#sidebar')
originalY = $(element).offset().top;
// Space between element and top of screen (when scrolling)
var topMargin = 20;
// Should probably be set in CSS; but here just for emphasis
element.css('position', 'relative');
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
footer_view = scrollTop + $('#sidebar').height();
if(footer_view >= $('#footer').offset().top ){
element.stop(false, false).animate({
top: ($('#footer').offset().top - $('#sidebar').height() - 200)}, 300);
//element.stop()
}
else{
element.stop(false, false).animate({
top: scrollTop < originalY ? 0 : scrollTop - originalY + topMargin }, 300);
}
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment