FuruholmAnton
6/9/2016 - 8:36 AM

Add class on scroll down - remove on scroll up


// 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;
  }