Skip to content

Instantly share code, notes, and snippets.

@perminder-klair
Created December 3, 2013 10:43
Show Gist options
  • Save perminder-klair/7767267 to your computer and use it in GitHub Desktop.
Save perminder-klair/7767267 to your computer and use it in GitHub Desktop.
Sticky Sidebar jQuery
var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 120;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment