diff --git a/static/js/common.js b/static/js/common.js
index 4b54170..a4b22e8 100644
--- a/static/js/common.js
+++ b/static/js/common.js
@@ -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);
+ });
+});
diff --git a/templates/base.html b/templates/base.html
index 0f93558..4676857 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -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;
+ }
{{ form.media }}
{% block extra_css %}{% endblock %}
-