Update navbar script

Debouncing with requestAnimationFrame
Minimum scroll threshold
Top/bottom boundary handling
State tracking
Passive scroll listeners
Orientation change handling
Visibility API handling
Smooth transitions

Author: nikoshell

src/components/Header.astro

@@ -49,21 +49,94 @@ import links from "@data/links.json";
 
 <script>
 document.addEventListener("DOMContentLoaded", function() {
-  var navbar = document.getElementById("navbar") as HTMLElement;
+  const navbar = document.getElementById("navbar") as HTMLElement;
   if (!navbar) return;
 
-  var prevScrollPos = window.pageYOffset || document.documentElement.scrollTop;
+  let prevScrollPos = window.pageYOffset || document.documentElement.scrollTop;
+  let ticking = false;
+  let isVisible = true;
 
-  window.addEventListener("scroll", function() {
-    var currentScrollPos = window.pageYOffset || document.documentElement.scrollTop;
+  // Ensure navbar is visible initially
+  navbar.style.transform = "translateY(0)";
+  navbar.style.transition = "transform 0.3s ease-in-out";
 
-    if (prevScrollPos > currentScrollPos) {
+  function updateNavbar() {
+    const currentScrollPos = Math.max(0, window.pageYOffset || document.documentElement.scrollTop);
+    const documentHeight = document.documentElement.scrollHeight;
+    const windowHeight = window.innerHeight;
+
+    // Don't hide navbar when at the very top
+    if (currentScrollPos <= 10) {
+      if (!isVisible) {
+        navbar.style.transform = "translateY(0)";
+        isVisible = true;
+      }
+      prevScrollPos = currentScrollPos;
+      ticking = false;
+      return;
+    }
+
+    // Don't hide navbar when at the very bottom
+    if (currentScrollPos + windowHeight >= documentHeight - 10) {
+      if (!isVisible) {
+        navbar.style.transform = "translateY(0)";
+        isVisible = true;
+      }
+      prevScrollPos = currentScrollPos;
+      ticking = false;
+      return;
+    }
+
+    // Only update if scroll difference is significant (helps with iOS bounce)
+    const scrollDiff = Math.abs(currentScrollPos - prevScrollPos);
+    if (scrollDiff < 5) {
+      ticking = false;
+      return;
+    }
+
+    // Show navbar when scrolling up, hide when scrolling down
+    if (prevScrollPos > currentScrollPos && !isVisible) {
       navbar.style.transform = "translateY(0)";
-    } else {
+      isVisible = true;
+    } else if (prevScrollPos < currentScrollPos && isVisible) {
       navbar.style.transform = "translateY(-100%)";
+      isVisible = false;
     }
 
     prevScrollPos = currentScrollPos;
+    ticking = false;
+  }
+
+  function requestTick() {
+    if (!ticking) {
+      requestAnimationFrame(updateNavbar);
+      ticking = true;
+    }
+  }
+
+  // Use passive listener for better performance on mobile
+  window.addEventListener("scroll", requestTick, { passive: true });
+
+  // Handle orientation change on mobile devices
+  window.addEventListener("orientationchange", function() {
+    setTimeout(() => {
+      prevScrollPos = Math.max(0, window.pageYOffset || document.documentElement.scrollTop);
+      if (prevScrollPos <= 10) {
+        navbar.style.transform = "translateY(0)";
+        isVisible = true;
+      }
+    }, 100);
+  });
+
+  // Handle page visibility changes (when switching tabs/apps)
+  document.addEventListener("visibilitychange", function() {
+    if (!document.hidden) {
+      prevScrollPos = Math.max(0, window.pageYOffset || document.documentElement.scrollTop);
+      if (prevScrollPos <= 10) {
+        navbar.style.transform = "translateY(0)";
+        isVisible = true;
+      }
+    }
   });
 });
 </script>