From e0e8f9acb5b47d25c5d713d3f9cd127153f3cd5c Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 18 Apr 2024 22:54:20 +0800
Subject: [PATCH] Use position: sticky to make navbar sticky

---
 src/_includes/global/navbar.njk | 31 ++-----------------------------
 1 file changed, 2 insertions(+), 29 deletions(-)

diff --git a/src/_includes/global/navbar.njk b/src/_includes/global/navbar.njk
index cd14ae9e..d7678224 100644
--- a/src/_includes/global/navbar.njk
+++ b/src/_includes/global/navbar.njk
@@ -12,6 +12,8 @@
         padding: 0 0.6rem;
         width: 100%;
         z-index: 999;
+        position: sticky;
+        top: 0;
     }
 
     .navbar a {
@@ -37,33 +39,4 @@
         flex-wrap: wrap;
         gap: 0.5rem;
     }
-
-    /* Added to the navbar with JS when it reaches its scroll position */
-    .nav--sticky {
-        position: fixed;
-        width: 100%;
-        top: 0;
-    }
-
-    /* Add some top padding to the page content to prevent sudden quick movement
-    as the navigation bar gets a new position at the top of the page
-    (position:fixed and top:0) */
-    .nav--sticky + main {
-        padding-top: 2rem;
-    }
 </style>
-
-<script defer>
-    // Make the navigation bar sticky
-    // const hero = document.querySelector(".hero");
-    const navbar = document.querySelector(".navbar");
-    window.addEventListener("scroll", () => {
-        const scrollPosition = window.scrollY || document.documentElement.scrollTop;
-        const stickyLine = hero.scrollHeight - navbar.scrollHeight;
-        if (scrollPosition > stickyLine + 100) {
-            navbar.classList.add("nav--sticky");
-        } else {
-            navbar.classList.remove("nav--sticky");
-        }
-    });
-</script>
\ No newline at end of file