Add feature to auto hide nav bar when scrolling

2026-08-08 21:04:53 +10:00 · 2025-06-30 21:26:25 +10:00
parent 41631c264f
commit 36b1ad5dd8
2 changed files with 70 additions and 1 deletions
@@ -12,3 +12,59 @@ function getCookie(name) {
    }
    return cookieValue;
 }
+
+// Scroll-responsive navigation functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const nav = document.getElementById('main-nav');
+    if (!nav) return;
+    
+    let lastScrollTop = 0;
+    let scrollThreshold = 100; // Hide nav after scrolling down 100px
+    let isNavVisible = true;
+    
+    function handleScroll() {
+        const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        
+        // Avoid negative scroll values on mobile
+        if (currentScrollTop < 0) return;
+        
+        // Don't hide nav if we're at the top of the page
+        if (currentScrollTop < scrollThreshold) {
+            showNav();
+            lastScrollTop = currentScrollTop;
+            return;
+        }
+        
+        // Determine scroll direction
+        if (currentScrollTop > lastScrollTop && isNavVisible) {
+            // Scrolling down - hide nav
+            hideNav();
+        } else if (currentScrollTop < lastScrollTop && !isNavVisible) {
+            // Scrolling up - show nav
+            showNav();
+        }
+        
+        lastScrollTop = currentScrollTop;
+    }
+    
+    function hideNav() {
+        nav.classList.remove('nav-visible');
+        nav.classList.add('nav-hidden');
+        isNavVisible = false;
+    }
+    
+    function showNav() {
+        nav.classList.remove('nav-hidden');
+        nav.classList.add('nav-visible');
+        isNavVisible = true;
+    }
+    
+    // Throttle scroll events for better performance
+    let scrollTimeout;
+    window.addEventListener('scroll', function() {
+        if (scrollTimeout) {
+            clearTimeout(scrollTimeout);
+        }
+        scrollTimeout = setTimeout(handleScroll, 10);
+    });
+});
@@ -47,13 +47,26 @@
        #search-input:focus {
            cursor: text;
        }
+        
+        /* Scroll-responsive navigation styles */
+        .nav-hidden {
+            transform: translateY(-100%);
+        }
+        
+        .nav-visible {
+            transform: translateY(0);
+        }
+        
+        nav {
+            transition: transform 0.3s ease-in-out;
+        }
    </style>
    {{ form.media }}
    {% block extra_css %}{% endblock %}
    <script src="{% static 'js/common.js' %}"></script>
 </head>
 <body class="bg-gray-100">
-    <nav class="bg-custom-blue text-white p-4 fixed w-full top-0 z-10">
+    <nav id="main-nav" class="bg-custom-blue text-white p-4 fixed w-full top-0 z-10 nav-visible">
        <div class="container mx-auto flex justify-between items-center">
            <a href="{% url 'link_list' %}" class="text-xl font-bold">{% trans "GoLinks" %}</a>
            <div class="flex items-center space-x-4">