sticky header reveal animation scroll navigation sticky header entrance animation fixed navbar reveal on scroll scroll-triggered header appearance sticky headers appear abruptly need smooth entrance for fixed navigation want slide-down reveal effect without JS animation
Sticky Reveal
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/sticky-reveal.json Preview
Background
Customize
Quick Start
<header class="sticky-reveal bg-white shadow">...</header>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 411 bytes · 26 lines
- Custom Properties
-
--reveal-speed - Classes
-
.sticky-reveal
sticky header reveal animation scroll navigation
A CSS keyframe animation that slides a sticky header into view from above. Apply this class via JS when the user scrolls past the header’s original position.
Sticky header
<header class="sticky-reveal bg-white shadow-md px-6 py-3">
<nav class="flex items-center justify-between">
<span class="font-bold">Logo</span>
<div class="flex gap-4">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
</header>Slower reveal
<header class="sticky-reveal" style="--reveal-speed: 0.8s">
...
</header>