Sticky Sidebar Synchronized to Scrolling Content

What this builds

A two-column layout where a sidebar stays fixed in the viewport while the main content scrolls. The sidebar reflects which content section is currently in view by highlighting the corresponding navigation item, swapping a visual, or updating a data panel. Clicking a sidebar item smooth-scrolls to the corresponding content section. The entire system is wrapped in a scroll-narrative section with proper entrance, synchronized zone, and exit.

• Sidebar sticks via position: sticky (CSS, no JS) or GSAP pin for complex cases
• Active-state tracking via IntersectionObserver (lightweight, no scroll listener)
• Smooth-scroll navigation from sidebar items to content sections
• Optional: sidebar visual swaps (image, illustration, or data panel changes with active section)
• Mobile: sidebar collapses to a horizontal scrollable nav bar at the top, or a floating pill
• prefers-reduced-motion: instant jumps instead of smooth scroll, no animated transitions
• Narrative wrapper with section entrance, synced zone, and exit