Sticky Navigation
A transparent nav that turns solid and compact once you scroll.
StarterWeb appUI component1–3hAI-buildable 5/5no setup
Scroll position drives a style change on the header. The version worth building uses IntersectionObserver on a sentinel element rather than reading scrollY on every scroll event.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 4
- The nav starts transparent and full-height over the hero
- Scrolling past a threshold makes it solid and compact
- The transition is smooth in both directions
- Detection avoids per-scroll-event layout reads
The interesting part
- Avoiding scroll jank from layout thrashing
Once it works
- Hide on scroll down, reveal on scroll up
- Add active-section highlighting
Suggested stack
reacttypescripttailwindframer-motion