← All elements
<div class="sc"><header><b>acme.</b><span>Home</span><span>Work</span></header><p>Scroll down inside this box to shrink the header.</p><p>Keep going.</p><p>And a little more.</p><p>The header follows your scroll.</p></div>About this navigation bar
A sticky header that gets shorter as you scroll, driven by a scroll-driven animation with a plain fallback.
How it works
The scrolling box declares a named scroll timeline, and the header animation uses it with animation-timeline. The animation range covers the first 90 pixels of scrolling, over which the header height and text size shrink. Because the browser ties progress to scroll position, it needs no scroll listener.
Ways to customise it
- Change 90px to set how far the user scrolls before the header finishes shrinking.
- Edit the final height in the keyframe.
- Change the header colours.
Good to know
Scroll-driven animation works in current Chromium browsers and recent Safari, and older ones keep the full header, which is a safe fallback. The header stays sticky, so links remain reachable.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.