Created a functionality so that when scrolling down the navbar is hidden

index.html

@@ -367,6 +367,7 @@ <h5>Aligarh</h5>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
         crossorigin="anonymous"></script>
+    <script src="./index.js"></script>
 </body>
 
 </html>

index.js

@@ -0,0 +1,16 @@
+let lastScrollTop = 0;
+const navbar = document.querySelector('.navbar');
+
+window.addEventListener('scroll', function() {
+    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+    if (scrollTop > lastScrollTop) {
+        // Scrolling down
+        navbar.style.top = '-80px'; // Adjust height accordingly
+    } else {
+        // Scrolling up
+        navbar.style.top = '0';
+    }
+
+    lastScrollTop = scrollTop;
+});