scroll sticky header navigation shrink sticky navigation that compacts on scroll header that gains shadow when scrolled shrinking navbar with glassmorphism header takes too much space after scrolling need sticky nav with scroll-aware styling want compact header without JS scroll listeners
Sticky Header
Fetch snippet JSON:
curl https://webspire.de/snippets/scroll/sticky-header.json
Header stays pinned while content keeps scrolling.
Condenses
Background
Customize
Quick Start
<header class="sticky-header px-6">Navigation</header> Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 794 bytes · 38 lines
- Custom Properties
-
--header-bg--header-blur--header-border - Classes
-
.sticky-header
scroll sticky header navigation shrink
A sticky header that smoothly shrinks its padding and gains a shadow as you scroll down. Powered by animation-timeline: scroll() — the transition is tied directly to scroll position, not a class toggle.
Navigation bar
<header class="sticky-header px-6">
<nav class="mx-auto flex max-w-6xl items-center justify-between">
<a href="/" class="text-lg font-bold text-white">Brand</a>
<div class="flex gap-6 text-sm text-white/70">
<a href="/features" class="hover:text-white transition-colors">Features</a>
<a href="/pricing" class="hover:text-white transition-colors">Pricing</a>
<a href="/docs" class="hover:text-white transition-colors">Docs</a>
</div>
</nav>
</header>