Javascript function added to keep navigation bar sticked to the top when scrolling

ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css

@@ -2,4 +2,11 @@
     background-color: hsl(0, 98%, 40%);
     
     box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
+}
+
+.sticky {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000; /* Adjust as needed */
 }

ProjectSourceCode/src/resources/js/navigation-bar/navigation-bar-follow.js

@@ -0,0 +1,37 @@
+// navbar-sticky.js
+
+// Function to add sticky behavior to the navbar
+function makeNavbarSticky() {
+    // Get the navigation bar element
+    var navbar = document.getElementById("navigation-bar-container");
+  
+    // Get the initial offset of the navbar from the top of the page
+    var navbarOffset = navbar.offsetTop;
+  
+    // Function to add sticky behavior when scrolling
+    function stickyNavbar() {
+      // Check if the current scroll position is greater than or equal to the initial offset of the navbar
+      if (window.pageYOffset >= navbarOffset) {
+        // Add the 'fixed-top' class to make the navbar sticky
+        navbar.classList.add("fixed-top");
+        // Add padding to the body to prevent content from jumping when the navbar becomes sticky
+        document.body.style.paddingTop = navbar.offsetHeight + "px";
+      } else {
+        // Remove the 'fixed-top' class to make the navbar non-sticky
+        navbar.classList.remove("fixed-top");
+        // Reset the padding of the body
+        document.body.style.paddingTop = 0;
+      }
+    }
+  
+    // Call the stickyNavbar function when the page is scrolled
+    window.onscroll = function() {
+      stickyNavbar();
+    };
+  }
+  
+  // Call the makeNavbarSticky function when the page loads
+  window.onload = function() {
+    makeNavbarSticky();
+  };
+  

ProjectSourceCode/src/views/partials/footer.hbs

@@ -3,6 +3,9 @@
             © 2024 - CSCI 3308 Group 6
         </p>
 
+        <!-- In your HTML file -->
+        <script src="js/navigation-bar/navigation-bar-follow.js"></script>
+
         <!-- Include Bootstrap JavaScript -->
         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>