Use position: sticky to make navbar sticky

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>