refactor: Collapse navbar without jquery

freifunkh · Jan 2, 2025 · 7366fd6 · 7366fd6
1 parent a42da6d
commit 7366fd6
Showing 1 changed file with 13 additions and 9 deletions.
diff --git a/js/grayscale.js b/js/grayscale.js
@@ -4,15 +4,19 @@
  * For details, see http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-// jQuery to collapse the navbar on scroll
-$(window).scroll(function () {
-    if ($(window).scrollTop() > $("header").outerHeight()) {
-        $(".navbar-custom").addClass("fixed-top");
-        $(".navbar-custom").css("background-color", "rgba(0,0,0,0.61)");
-    } else {
-        $(".navbar-custom").removeClass("fixed-top");
-        $(".navbar-custom").css("background-color", "rgba(0,0,0,1)");
-    }
+document.addEventListener("DOMContentLoaded", function () {
+    const navbar = document.querySelector(".navbar-custom");
+
+    // event listener to collapse the navbar on scroll
+    window.addEventListener("scroll", function () {
+        if (window.scrollY > document.querySelector("header").offsetHeight) {
+            navbar.classList.add("fixed-top");
+            navbar.style.backgroundColor = "rgba(0,0,0,0.61)";
+        } else {
+            navbar.classList.remove("fixed-top");
+            navbar.style.backgroundColor = "rgba(0,0,0,1)";
+        }
+    });
 });
 
 // jQuery for page scrolling feature - requires jQuery Easing plugin