axolx · June 30, 2014 22:02 · Jun 30, 2014
diff --git a/nav-reveal.js b/nav-reveal.js
@@ -0,0 +1,44 @@
+/**
+ * Hide navbar on on scroll down, reveal on scroll up
+ * @see https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c
+ */
+(function ($) {
+  'use strict';
+  var didScroll;
+  var lastScrollTop = 0;
+  var delta = 5;
+  var navbarHeight = $('.navbar').outerHeight();
+
+  $(window).scroll(function () {
+    didScroll = true;
+  });
+
+  setInterval(function () {
+    if (didScroll) {
+      hasScrolled();
+      didScroll = false;
+    }
+  }, 250);
+
+  function hasScrolled() {
+    var st = $('body').scrollTop();
+
+    // 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').removeClass('nav-down').addClass('nav-up');
+    } else {
+      // Scroll Up
+      if (st + $(window).height() < $(document).height()) {
+        $('.navbar').removeClass('nav-up').addClass('nav-down');
+      }
+    }
+
+    lastScrollTop = st;
+  }
+})(jQuery);