All projects · UI Components & Interactions
CoffeeHouse: Sticky Sidebar Navigation & Scrollspy TOC Studio
A production-grade sticky navigation showcase for CoffeeHouse utilizing native CSS position: sticky, IntersectionObserver scrollspy section…
A production-grade sticky navigation showcase for CoffeeHouse utilizing native CSS position: sticky, IntersectionObserver scrollspy section tracking, and header-compensated smooth anchor scrolling, paired with an interactive CSS mechanics inspector and 8-point automated diagnostic suite.
- Locks sidebar navigation in place as user scrolls down using native CSS position: sticky with top threshold offset
- Synchronizes section highlighting in real time via decoupled IntersectionObserver tracking optical reading line (-20% to -60% rootMargin)
- Implements smooth scroll jumps to all page sections (#home, #menu, #about, #join, #savings, #locations) with scroll-margin-top header clearance
- Supports 3 switchable sidebar layouts: Artisanal Card TOC, Minimalist Dot Rail (matching the challenge recording), and Floating Capsule
- Features an interactive CSS Sticky Mechanics Inspector dissecting relative flow, pinned viewport state, and parent boundary collisions
- Includes an automated 8-point in-browser diagnostic test suite verifying computed styles, geometry thresholds, and ARIA semantics
Built with: CSS position: sticky, Scrollspy, IntersectionObserver, scroll-margin-top, Table of Contents (TOC), Smooth Scroll, Vanilla JavaScript, Design Systems