added auto hide feature

bamr87 · Mar 7, 2024 · 1d1fd5e · 1d1fd5e
1 parent 1cc4b8f
commit 1d1fd5e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -3,6 +3,7 @@
 
 <!-- Custom JS Scripts -->
 <script src="/assets/js/myScript.js"></script>
+<script src="/assets/js/auto-hide-nav.js"></script>
 <script src="/assets/js/back-to-top.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js"></script>
 
@@ -24,8 +25,9 @@
     <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
 
     <!-- Bootstrap -->
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
+    <!-- source: https://getbootstrap.com/ -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 
     <!-- Tailwing CDN -->
 

diff --git a/_includes/header.html b/_includes/header.html
@@ -3,7 +3,7 @@
     _includes/branding.html, _includes/navbar.html
  -->
 
-<header class="bd-header navbar navbar-expand-lg navbar-dark bg-primary sticky-top bottom-shadow" role="banner">
+<header id="navbar" class="bd-header navbar navbar-expand-lg navbar-dark bg-primary sticky-top bottom-shadow" role="banner">
     <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap">
 
         <!-- Collapse Button in mobile view -->

diff --git a/assets/js/auto-hide-nav.js b/assets/js/auto-hide-nav.js
@@ -0,0 +1,15 @@
+  // Hides the navbar when scrolling down and shows it when scrolling up
+  window.onload = function() {
+    let lastScrollTop = 0;
+    const navbar = document.getElementById('navbar');
+
+    window.addEventListener('scroll', function() {
+        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        if (scrollTop > lastScrollTop) {
+            navbar.classList.add('hide-navbar');
+        } else {
+            navbar.classList.remove('hide-navbar');
+        }
+        lastScrollTop = scrollTop;
+    });
+}