Use headroom.js to hide the header on scroll

package.json

@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.5.1"
+  "version": "0.5.2"
 }

src/js/app.js

@@ -1,5 +1,6 @@
 import cssVars from 'css-vars-ponyfill'
 import $ from 'jquery'
+import Headroom from "headroom.js"
 import slick from 'slick-carousel'
 import tippy from 'tippy.js'
 import AOS from 'aos'
@@ -30,54 +31,9 @@ $(document).ready(() => {
   const $searchResults = $('.js-search-results')
   const $searchNoResults = $('.js-no-results')
 
-  const headerHeight = $header.outerHeight()
-
   let fuse = null
-  let lastScrollY = window.pageYOffset
-  let ticking = false
   let submenuIsOpen = false
 
-  function onScroll() {
-    requestTick()
-  }
-
-  function requestTick() {
-    if (!ticking) {
-      requestAnimationFrame(toggleHeader)
-    }
-
-    ticking = true
-  }
-
-  function toggleHeader() {
-    const scrollTop = window.pageYOffset
-
-    if (scrollTop >= headerHeight) {
-      $header.addClass('fixed')
-
-      if (submenuIsOpen) {
-        $header.addClass('fixed-active')
-      }
-
-      if (scrollTop >= lastScrollY) {
-        if (!submenuIsOpen) {
-          $header.removeClass('fixed-active')
-        }
-      } else {
-        $header.addClass('fixed-active')
-      }
-    } else {
-      if (!submenuIsOpen) {
-        $header.removeClass('fixed-active')
-      }
-
-      $header.removeClass('fixed')
-    }
-
-    lastScrollY = scrollTop
-    ticking = false
-  }
-
   function showSubmenu() {
     $header.addClass('submenu-is-active')
     $toggleSubmenu.addClass('active')
@@ -228,6 +184,19 @@ $(document).ready(() => {
     }
   })
 
+  var headerElement = document.querySelector('.js-header')
+
+  if (headerElement) {
+    var headroom = new Headroom(headerElement, {
+      tolerance: {
+        down: 10,
+        up: 20
+      },
+      offset: 15
+    })
+    headroom.init()
+  }
+
   if ($recentArticles.length > 0) {
     $recentArticles.slick({
       adaptiveHeight: true,
@@ -251,6 +220,4 @@ $(document).ready(() => {
   tippy('.js-tooltip')
 
   trySearchFeature()
-
-  window.addEventListener('scroll', onScroll, { passive: true })
 })

src/package-lock.json

@@ -6533,6 +6533,11 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "headroom.js": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/headroom.js/-/headroom.js-0.10.3.tgz",
+      "integrity": "sha512-gMLqEtViTt4GI2G2+XnqRr9OIxxrgKmywHuCY2XtjKnQc2UcdDKbocvkL7Ohi1K5v3sU7BZmzqbQakAjDG/WZQ=="
+    },
     "hex-color-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",

src/package.json

@@ -34,6 +34,7 @@
     "css-vars-ponyfill": "^2.1.2",
     "fitvids": "^2.0.0",
     "fuse.js": "^3.4.2",
+    "headroom.js": "^0.10.3",
     "jquery": "^3.3.1",
     "medium-zoom": "^1.0.3",
     "promise-polyfill": "8.1.0",

src/sass/components/header/_header.scss

@@ -1,30 +1,28 @@
 .m-header {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 4;
+  background-color: var(--background-color);
+  will-change: transform;
+  @include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
 
   @include respond-to('medium') {
     padding: 20px 0;
   }
 
-  &.fixed {
+  &.headroom--pinned {
-    position: fixed;
-    opacity: 0;
-    background-color: var(--background-color);
-    @include transform(translateY(-100%));
     @include bs(0 4px 8px rgba(0, 0, 0, 0.05));
-    @include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
+    @include transform(translateY(0%));
 
     .m-header__shadow {
       display: none;
     }
   }
 
-  &.fixed-active {
+  &.headroom--unpinned {
-    opacity: 1;
+    @include transform(translateY(-100%));
-    @include transform(translateY(0));
   }
 
   &.submenu-is-active {