fix sticky nav auto minimize

js/utils/stickyNavigation.js

@@ -25,10 +25,73 @@ export function initializeStickyNavigation(navElementId) {
     
     // Scroll handler with throttling
     let scrollTimeout;
+    let navOriginalHeight = 0; // Initialize to 0
+
     const handleScroll = () => {
         const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
-        navSection.classList.toggle('sticky-nav', scrollPosition >= stickyThreshold);
+        const shouldBeSticky = scrollPosition >= stickyThreshold;
+        
+        // Toggle sticky class
+        if (shouldBeSticky && !navSection.classList.contains('sticky-nav')) {
+            // Capture TOTAL HEIGHT including margins BEFORE becoming sticky
+            const computedStyle = window.getComputedStyle(navSection);
+            const marginTop = parseInt(computedStyle.marginTop) || 0;
+            const marginBottom = parseInt(computedStyle.marginBottom) || 0;
+            navOriginalHeight = navSection.offsetHeight + marginTop + marginBottom;
+            
+            // Becoming sticky - auto-collapse navigation
+            navSection.classList.add('sticky-nav');
+            
+            // Push down following content to compensate for removed element
+            const nextElement = navSection.nextElementSibling;
+            if (nextElement) {
+                nextElement.style.marginTop = `${navOriginalHeight}px`;
+            }
+            
+            autoCollapseNavigation();
+        } else if (!shouldBeSticky && navSection.classList.contains('sticky-nav')) {
+            // Leaving sticky - auto-expand navigation
+            navSection.classList.remove('sticky-nav');
+            
+            // Remove the compensating margin
+            const nextElement = navSection.nextElementSibling;
+            if (nextElement) {
+                nextElement.style.marginTop = '';
+            }
+            
+            autoExpandNavigation();
+        }
     };
+
+    /**
+     * Auto-collapse navigation when becoming sticky
+     */
+    function autoCollapseNavigation() {
+        const navItems = document.getElementById('nav-items');
+        const navToggle = document.getElementById('nav-toggle');
+        const navContainer = document.getElementById('nav-container');
+        
+        if (navItems && !navItems.classList.contains('nav-collapsed')) {
+            navItems.classList.add('nav-collapsed');
+            navToggle?.setAttribute('aria-expanded', 'false');
+            navContainer?.classList.add('nav-container-collapsed');
+        }
+    }
+
+    /**
+     * Auto-expand navigation when leaving sticky mode
+     */
+    function autoExpandNavigation() {
+        const navItems = document.getElementById('nav-items');
+        const navToggle = document.getElementById('nav-toggle');
+        const navContainer = document.getElementById('nav-container');
+        
+        if (navItems && navItems.classList.contains('nav-collapsed')) {
+            navItems.classList.remove('nav-collapsed');
+            navToggle?.setAttribute('aria-expanded', 'true');
+            navContainer?.classList.remove('nav-container-collapsed');
+        }
+    }
     
     window.addEventListener('scroll', () => {
         if (scrollTimeout) cancelAnimationFrame(scrollTimeout);

styles.css

@@ -201,7 +201,7 @@ p {
 }
 
 .page-navigation.sticky-nav #nav-container {
-    background: rgba(222, 241, 243, 0.3);
+    background: rgba(240, 247, 248, 0.3);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     padding: 0.75rem 1.5rem;
@@ -212,7 +212,7 @@ p {
 /* Add breathing room between sticky nav and content */
 .page-navigation.sticky-nav ~ section:first-of-type,
 .page-navigation.sticky-nav ~ div:first-of-type {
-    margin-top: 0.75rem;
+    margin-top: 0;
 }
 
 /* Navigation collapse/expand */