From 7366fd676cd0820f91759a9ba76b1990debe78d1 Mon Sep 17 00:00:00 2001
From: "aiyion.prime" <git@aiyionpri.me>
Date: Fri, 3 Jan 2025 00:01:14 +0100
Subject: [PATCH] refactor: Collapse navbar without jquery

---
 js/grayscale.js | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/js/grayscale.js b/js/grayscale.js
index ad782eb..69ec16b 100644
--- 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