sticky_nav_prettier

js/main.js

@@ -12,7 +12,13 @@ export function scrollToSection(sectionId) {
     if (element) {
         const elementRect = element.getBoundingClientRect();
         const absoluteElementTop = elementRect.top + window.pageYOffset;
-        const offset = 120; // Account for fixed header + some padding
+        
+        // Calculate offset: header height + sticky nav height + padding
+        const headerHeight = parseInt(getComputedStyle(document.documentElement)
+            .getPropertyValue('--header-height')) || 100;
+        const stickyNav = document.querySelector('.page-navigation.sticky-nav');
+        const navHeight = stickyNav ? stickyNav.offsetHeight : 0;
+        const offset = headerHeight + navHeight + 16; // 16px padding
         
         window.scrollTo({
             top: absoluteElementTop - offset,

js/utils/stickyNavigation.js

@@ -1,5 +1,5 @@
 // stickyNavigation.js - Sticky navigation behavior and hamburger menu
-// Handles: sticky positioning on scroll + collapse/expand toggle
+// Handles: sticky positioning on scroll + collapse/expand toggle + active section tracking
 
 /**
  * Initializes sticky navigation behavior for a page
@@ -36,6 +36,93 @@ export function initializeStickyNavigation(navElementId) {
     });
     
     handleScroll(); // Initial check
+    
+    // Initialize active section tracking
+    initializeActiveSectionTracking();
+}
+
+/**
+ * Track visible sections and update active navigation item
+ * Uses Intersection Observer for efficient scroll tracking
+ */
+function initializeActiveSectionTracking() {
+    // Get all navigation links
+    const navLinks = document.querySelectorAll('.page-navigation a[href^="/#"], .page-navigation a[href*="#"]');
+    if (navLinks.length === 0) return;
+    
+    // Extract section IDs from navigation links
+    const sectionIds = Array.from(navLinks)
+        .map(link => {
+            const href = link.getAttribute('href');
+            const hashIndex = href.indexOf('#');
+            return hashIndex >= 0 ? href.substring(hashIndex + 1) : null;
+        })
+        .filter(id => id);
+    
+    if (sectionIds.length === 0) return;
+    
+    // Get all section elements
+    const sections = sectionIds
+        .map(id => document.getElementById(id))
+        .filter(section => section);
+    
+    if (sections.length === 0) return;
+    
+    // Track which section is most visible
+    const observerOptions = {
+        root: null,
+        rootMargin: '-20% 0px -60% 0px', // Trigger when section is 20% from top
+        threshold: [0, 0.1, 0.2, 0.5, 0.8, 1]
+    };
+    
+    let activeSection = null;
+    
+    const observer = new IntersectionObserver((entries) => {
+        // Find the most visible section
+        let mostVisible = null;
+        let maxRatio = 0;
+        
+        entries.forEach(entry => {
+            if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {
+                maxRatio = entry.intersectionRatio;
+                mostVisible = entry.target;
+            }
+        });
+        
+        // Update active section if changed
+        if (mostVisible && mostVisible !== activeSection) {
+            activeSection = mostVisible;
+            updateActiveNavItem(mostVisible.id);
+        }
+    }, observerOptions);
+    
+    // Observe all sections
+    sections.forEach(section => observer.observe(section));
+}
+
+/**
+ * Update active navigation item based on current section
+ * @param {string} sectionId - ID of the currently visible section
+ */
+function updateActiveNavItem(sectionId) {
+    const navLinks = document.querySelectorAll('.page-navigation a');
+    
+    navLinks.forEach(link => {
+        const href = link.getAttribute('href');
+        const linkSectionId = href.substring(href.indexOf('#') + 1);
+        
+        if (linkSectionId === sectionId) {
+            // Add active classes
+            link.classList.add('text-blue-600', 'font-semibold');
+            link.classList.add('underline', 'decoration-2', 'underline-offset-2');
+            link.classList.remove('text-gray-700');
+        } else {
+            // Remove active classes
+            link.classList.remove('text-blue-600', 'font-semibold');
+            link.classList.remove('underline', 'decoration-2', 'underline-offset-2');
+            link.classList.add('text-gray-700');
+        }
+    });
 }
 
 /**

styles.css

@@ -12,6 +12,11 @@ html, body {
     width: 100%;
 }
 
+/* Smooth scrolling for the entire page */
+html {
+    scroll-behavior: smooth;
+}
+
 /* Apply fonts to base elements */
 body {
     font-family: 'Source Sans Pro', sans-serif;
@@ -164,6 +169,28 @@ p {
     transition: all 0.2s ease;
 }
 
+/* Navigation link active state transitions */
+.page-navigation a {
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+/* Subtle entrance animation for sticky nav */
+@keyframes slideDown {
+    from {
+        opacity: 0.8;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.page-navigation.sticky-nav #nav-container {
+    animation: slideDown 0.3s ease-out;
+}
+
 .page-navigation.sticky-nav {
     position: fixed;
     top: var(--header-height);
@@ -219,7 +246,7 @@ p {
 @media (max-width: 767px) {
     .page-navigation.sticky-nav {
         top: var(--header-height);
-        padding: 0.25rem 0; /* Less padding on mobile */
+        padding: 0.25rem 0;
     }
     
     .page-navigation.sticky-nav #nav-container {
@@ -228,7 +255,17 @@ p {
     
     .page-navigation.sticky-nav ~ section:first-of-type,
     .page-navigation.sticky-nav ~ div:first-of-type {
-        margin-top: 0.5rem; /* Less space on mobile */
+        margin-top: 0.5rem;
+    }
+    
+    /* Auto-collapse navigation on mobile when sticky for better UX */
+    .page-navigation.sticky-nav #nav-items {
+        font-size: 0.875rem; /* Slightly smaller text */
+    }
+    
+    /* Ensure hamburger is more prominent on mobile */
+    .page-navigation.sticky-nav #nav-toggle {
+        padding: 0.5rem;
     }
 }