Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save jquimera/02b14170617588e7c59104527b54eab0 to your computer and use it in GitHub Desktop.
Save jquimera/02b14170617588e7c59104527b54eab0 to your computer and use it in GitHub Desktop.
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbar = document.querySelector(".site-header");
var navbarHeight = navbar.offsetHeight;
window.addEventListener("scroll", function(){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = window.scrollY;
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
navbar.classList.add("mod-up");
} else {
// Scroll Up
if(st + window.innerHeight < document.body.offsetHeight) {
navbar.classList.remove("mod-up");
}
}
lastScrollTop = st;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment