Scroll the preview
Watch the header shrink smoothly as you scroll past the threshold.
CSS Sticky Header Generator
Build a header that shrinks smoothly as the page scrolls. Scroll the preview, tune the heights, then copy the code.
My Site
Scroll inside this box to watch the header shrink smoothly.
Keep scrolling to see the effect settle in.
This mimics a real page header on a long content page.
More content down here so there's room to scroll.
And a little more to make sure it scrolls nicely.
Ready-to-use CSS + JS
How it works
Set both heights
Choose the normal and shrunk header heights to fit your design.
Copy the code
Get a small scroll listener plus the matching CSS transition.
FAQ
How does the header know when to shrink?
A scroll listener checks the container's scrollTop against a threshold and toggles a "scrolled" class, which a CSS transition animates smoothly between heights.
Why use position: sticky instead of fixed?
position: sticky keeps the header within its normal document flow until it reaches the top of its scroll container, avoiding some of the layout quirks fixed positioning can introduce.
Can I add a shadow only after scrolling?
Yes, enable the shadow option to fade in a drop shadow once the page has scrolled past the threshold, which helps separate the header from content beneath it.