Make navigation always sticky, remove headroom.js (#1356)

The nav was using headroom.js to hide on scroll-down and reappear on scroll-up. We're switching to a permanently-pinned nav

The "scrolled past top" state (used for a subtle drop-shadow under
the nav) is now detected with a 1px sentinel element + IntersectionObserver instead of headroom's scroll listener (same visual, no library).

Also:
- Add `scroll-padding-block-start` so in-page anchor links account
  for the sticky nav.
- Disable the shadow transition under `prefers-reduced-motion`.
- Remove now-dead `body:has(.fl-landing-get) .headroom-unpinned` override.
- Drop headroom.js dependency.

Author: slightlyoffbeat

media/css/cms/components/flare26-navigation.css

@@ -16,6 +16,10 @@
 * and preferred-color-scheme fallback, in case a class isn't provided.
 */
 
+html {
+    scroll-padding-block-start: var(--fl-navigation-menu-height);
+}
+
 .fl-header {
     background-color: var(--fl-theme-background);
     color: var(--fl-theme-color-text);
@@ -28,6 +32,15 @@
     position: static;
 }
 
+/* IntersectionObserver target for detecting scroll-past-top — see flare-navigation.es6.js */
+.fl-header-sentinel {
+    block-size: 1px;
+    inline-size: 1px;
+    inset-block-start: 0;
+    pointer-events: none;
+    position: absolute;
+}
+
 .fl-header a {
     text-decoration: none;
 }
@@ -380,38 +393,34 @@
         --fl-navigation-menu-height: 67px;
     }
 
-    .fl-header.headroom {
+    .fl-header.enable-sticky {
         inset-block-start: 0;
         position: sticky;
-        transition:
-            transform 200ms linear,
-            box-shadow 200ms linear;
+        transition: box-shadow 200ms ease-out;
         z-index: 100;
     }
 
-    .fl-header.headroom-pinned {
-        transform: translateY(0%);
+    @media (prefers-reduced-motion: reduce) {
+        .fl-header.enable-sticky {
+            transition: none;
+        }
     }
 
-    .fl-header.headroom-pinned.headroom-not-top {
+    .fl-header.enable-sticky.is-scrolled {
         box-shadow:
             0 0 6px 1px rgba(29, 17, 51, 0.04),
             0 0 var(--token-spacing-sm) 2px rgba(9, 32, 77, 0.12),
             0 0 5px -3px rgba(29, 17, 51, 0.12);
     }
 
-    .fl-header.headroom-pinned.headroom-not-top .fl-menu-panel {
+    .fl-header.enable-sticky.is-scrolled .fl-menu-panel {
         box-shadow:
             0 6px 6px 1px rgba(29, 17, 51, 0.04),
             0 var(--token-spacing-sm) var(--token-spacing-sm) 2px
                 rgba(9, 32, 77, 0.12),
             0 5px 5px -3px rgba(29, 17, 51, 0.12);
     }
 
-    .fl-header.headroom-unpinned {
-        transform: translateY(-100%);
-    }
-
     .fl-header.fl-header-no-menu {
         padding-block: 9px;
     }

media/css/cms/flare-navigation.css

@@ -12,6 +12,10 @@
     --fl-navigation-menu-height: 58px;
 }
 
+html {
+    scroll-padding-top: var(--fl-navigation-menu-height);
+}
+
 /* ================================================
    Header Base Styles
    ================================================ */
@@ -27,6 +31,15 @@
     position: static;
 }
 
+/* IntersectionObserver target for detecting scroll-past-top — see flare-navigation.es6.js */
+.fl-header-sentinel {
+    position: absolute;
+    top: 0;
+    width: 1px;
+    height: 1px;
+    pointer-events: none;
+}
+
 .fl-header a {
     text-decoration: none;
 }
@@ -364,31 +377,27 @@
         padding: 0;
     }
 
-    .fl-header.headroom {
+    .fl-header.enable-sticky {
         position: sticky;
         top: 0;
         z-index: 100;
-        transition: transform 200ms linear, box-shadow 200ms linear;
+        transition: box-shadow 200ms ease-out;
     }
 
-    .fl-header.headroom-pinned {
-        transform: translateY(0%);
-
+    @media (prefers-reduced-motion: reduce) {
+        .fl-header.enable-sticky {
+            transition: none;
+        }
     }
 
-    .fl-header.headroom-pinned.headroom-not-top {
+    .fl-header.enable-sticky.is-scrolled {
         box-shadow: 0 0 6px 1px rgba(29, 17, 51, 0.04), 0 0 8px 2px rgba(9, 32, 77, 0.12), 0 0 5px -3px rgba(29, 17, 51, 0.12);
     }
 
-    .fl-header.headroom-pinned.headroom-not-top .fl-menu-panel {
+    .fl-header.enable-sticky.is-scrolled .fl-menu-panel {
         box-shadow: 0 6px 6px 1px rgba(29, 17, 51, 0.04), 0 8px 8px 2px rgba(9, 32, 77, 0.12), 0 5px 5px -3px rgba(29, 17, 51, 0.12);
     }
 
-
-    .fl-header.headroom-unpinned {
-        transform: translateY(-100%);
-    }
-
     .fl-header.fl-header-no-menu {
         padding-block: 9px;
     }

media/css/cms/pages/flare26-landing-get-page.css

@@ -207,11 +207,6 @@
     }
 
     @media (--viewport-md-up) {
-        /* Keep nav always visible on scroll for this page */
-        body:has(.fl-landing-get) .fl-header.headroom-unpinned {
-            transform: translateY(0%);
-        }
-
         .fl-landing-get .c-intro-download {
             align-items: flex-start;
         }

media/js/cms/flare-navigation.es6.js

@@ -6,22 +6,23 @@
 
 // Sticky header
 import { createFocusTrap } from 'focus-trap';
-import Headroom from 'headroom.js';
 
 (function () {
     const headerEl = document.querySelector('.fl-header.enable-sticky');
 
     if (headerEl) {
-        const headroomInstance = new Headroom(headerEl, {
-            offset: 80,
-            classes: {
-                pinned: 'headroom-pinned',
-                unpinned: 'headroom-unpinned',
-                notTop: 'headroom-not-top',
-                notBottom: 'headroom-not-bottom'
-            }
+        const sentinel = document.createElement('div');
+        sentinel.className = 'fl-header-sentinel';
+        sentinel.setAttribute('aria-hidden', 'true');
+        headerEl.parentNode.insertBefore(sentinel, headerEl);
+
+        const observer = new IntersectionObserver(function (entries) {
+            headerEl.classList.toggle(
+                'is-scrolled',
+                !entries[0].isIntersecting
+            );
         });
-        headroomInstance.init();
+        observer.observe(sentinel);
     }
 
     // Hamburger menu

package-lock.json

@@ -18,7 +18,6 @@
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.4",
     "css-minimizer-webpack-plugin": "^8.0.0",
-    "headroom.js": "^0.12.0",
     "mini-css-extract-plugin": "^2.10.2",
     "postcss": "^8.5.14",
     "postcss-custom-media": "^10.0.2",