Auto-hide page nav when scrolling down

mattsherman · Dec 5, 2024 · c8ce1bf · c8ce1bf
1 parent e88c166
commit c8ce1bf
Showing 1 changed file with 22 additions and 0 deletions.
diff --git a/src/script.ts b/src/script.ts
@@ -0,0 +1,22 @@
+function hookupPageNavAutoHide() {
+  const header = document.querySelector("body > nav");
+  const scrollThreshold = 10;
+
+  let lastScrollY = globalThis.scrollY;
+
+  globalThis.addEventListener("scroll", () => {
+    const currentScrollY = globalThis.scrollY;
+    const isScrollingDown =
+      currentScrollY > scrollThreshold && currentScrollY > lastScrollY;
+
+    if (isScrollingDown) {
+      header?.classList.add("hidden");
+    } else {
+      header?.classList.remove("hidden");
+    }
+
+    lastScrollY = currentScrollY;
+  });
+}
+
+hookupPageNavAutoHide();