Skip to content

Instantly share code, notes, and snippets.

@juristr
Created December 23, 2013 20:41
Show Gist options
  • Save juristr/8104205 to your computer and use it in GitHub Desktop.
Save juristr/8104205 to your computer and use it in GitHub Desktop.
This script hides the navbar '.js-navbar' when scrolling downwards on a page and shows it again when scrolling upwards. Used this on my blog for articles and hiding the top-navbar.
/*
This script hides the navbar '.js-navbar'
when scrolling downwards on a page and shows it again
when scrolling upwards
*/
$(function(){
var $nav = $('.js-navbar'),
_hideShowOffset = 20,
_lastScroll = 0,
_detachPoint = 50;
$(window).scroll(function(){
var t = $(window).scrollTop(),
e = t > _lastScroll ? "down" : "up",
i = Math.abs(t - _lastScroll);
if(t >= _detachPoint || 0 >= t || t > -1){
if('down' === e && i >= _hideShowOffset){
$nav.slideUp();
}else if('up' === e && i >= _hideShowOffset){
$nav.slideDown();
}
}
_lastScroll = t;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment