Tailwind UI Pattern Registry for humans and agents

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
Format
Brand
FeaturesPricingDocs
Header stays pinned while content keeps scrolling. Condenses
Stage 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.

<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>