Skip to content

Instantly share code, notes, and snippets.

@jasesmith

jasesmith/StickyBar.md

Last active Aug 29, 2015
Embed
What would you like to do?
.bar {
position: relative;
}
.sticky-bar .bar {
position: fixed;
left: 0; // or whatever makes it fit
right: 0; // or whatever makes it fit
}
var stickyBar = function(bar, pane) {
var $body = $('body'),
$bar = $(bar),
$pane = $(pane),
barHeight = $bar.outerHeight(true),
$barParent = $bar.parent(),
offset = $bar.offset().top - $pane.offset().top + barHeight;
$pane.on('scroll', function() {
var distance = $pane.scrollTop();
$body.toggleClass('sticky-bar', (distance > offset));
if($body.hasClass('sticky-bar')) {
$bar.css({top: Math.floor($pane.offset().top)});
$barParent.css({paddingTop: barHeight});
} else {
$bar.css({top: 0});
$barParent.css({paddingTop: 0});
}
});
};

Sticky Bar

Make an element sticky once it has scrolled out of view in a scrollable <div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment