feat: Add dynamic header background color change on scroll

assets/scss/_styles_project.scss

@@ -141,6 +141,12 @@ sections site wide to the original site's background svg.
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
+  transition: background-color 0.3s ease;
+
+  &.navbar-scrolled {
+    background-color: rgba(26, 63, 81, 0.95) !important; // Using the $primary color with opacity
+    backdrop-filter: blur(8px);
+  }
 }
 
 /* Keep existing styles for other elements */

layouts/_default/baseof.html

@@ -20,13 +20,27 @@
     <script>
         document.addEventListener("DOMContentLoaded", () => {
           const scrollToTopButton = document.getElementById("scrollToTop");
+          const navbar = document.querySelector('.js-navbar-scroll');
+          let lastScrollTop = 0;
 
           window.addEventListener("scroll", () => {
-            if (window.scrollY > 300) {
+            const scrollTop = window.scrollY;
+
+            // Handle scroll-to-top button visibility
+            if (scrollTop > 300) {
               scrollToTopButton.style.display = "block";
             } else {
               scrollToTopButton.style.display = "none";
             }
+
+            // Handle navbar background
+            if (scrollTop > 0) {
+              navbar.classList.add('navbar-scrolled');
+            } else {
+              navbar.classList.remove('navbar-scrolled');
+            }
+
+            lastScrollTop = scrollTop;
           });
 
           scrollToTopButton.addEventListener("click", () => {