From 06d232170121f59771f44eaa13d074f20b32434d Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Mon, 19 May 2025 15:52:39 +0200
Subject: [PATCH] Navbar scrolling improvement.

---
 src/components/Header.astro | 41 +++++++++++++++++++++++++------------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 3fa55e0af..9239c05d8 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -47,26 +47,41 @@ import links from "@data/links.json";
 <Search />
 
 <script>
-  let prevScrollPos = window.pageYOffset;
-  const navbar = document.getElementById("navbar") as HTMLElement;
-
-  window.addEventListener("scroll", () => {
-    let currentScrollPos = window.pageYOffset;
-    if (prevScrollPos > currentScrollPos) {
-      navbar.style.transform = "translateY(0)";
-    } else {
-      navbar.style.transform = "translateY(-100%)";
+document.addEventListener("DOMContentLoaded", function() {
+  let prevScrollPos = window.scrollY || window.pageYOffset;
+  const navbar = document.getElementById("navbar");
+
+  if (!navbar) return;
+
+  let ticking = false;
+
+  window.addEventListener("scroll", function() {
+    if (!ticking) {
+      window.requestAnimationFrame(function() {
+        let currentScrollPos = window.scrollY || window.pageYOffset;
+
+        if (prevScrollPos > currentScrollPos) {
+          navbar.style.transform = "translateY(0)";
+        } else {
+          navbar.style.transform = "translateY(-100%)";
+        }
+
+        prevScrollPos = currentScrollPos;
+        ticking = false;
+      });
+
+      ticking = true;
     }
-    prevScrollPos = currentScrollPos;
   });
 
-  navbar.addEventListener("focusin", () => {
+  navbar.addEventListener("focusin", function() {
     navbar.style.transform = "translateY(0)";
   });
 
-  navbar.addEventListener("focusout", () => {
-    if (window.pageYOffset > 100) {
+  navbar.addEventListener("focusout", function() {
+    if ((window.scrollY || window.pageYOffset) > 100) {
       navbar.style.transform = "translateY(-100%)";
     }
   });
+});
 </script>