From db748a38f908fa402ccddf02e00cae7d2335241f Mon Sep 17 00:00:00 2001
From: Lucas Patenaude <LUPA7501@colorado.edu>
Date: Sun, 7 Apr 2024 04:59:09 -0600
Subject: [PATCH] Javascript function added to keep navigation bar sticked to
 the top when scrolling

---
 .../css/navigation-bar/navigation-bar.css     |  7 ++++
 .../navigation-bar/navigation-bar-follow.js   | 37 +++++++++++++++++++
 .../src/views/partials/footer.hbs             |  3 ++
 3 files changed, 47 insertions(+)

diff --git a/ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css b/ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css
index 4b6f439..c0e7209 100644
--- a/ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css
+++ b/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 */
 }
\ No newline at end of file
diff --git a/ProjectSourceCode/src/resources/js/navigation-bar/navigation-bar-follow.js b/ProjectSourceCode/src/resources/js/navigation-bar/navigation-bar-follow.js
index e69de29..f8317f5 100644
--- a/ProjectSourceCode/src/resources/js/navigation-bar/navigation-bar-follow.js
+++ b/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();
+  };
+  
\ No newline at end of file
diff --git a/ProjectSourceCode/src/views/partials/footer.hbs b/ProjectSourceCode/src/views/partials/footer.hbs
index 16b301f..eb850b7 100644
--- a/ProjectSourceCode/src/views/partials/footer.hbs
+++ b/ProjectSourceCode/src/views/partials/footer.hbs
@@ -3,6 +3,9 @@
             &copy; 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>