Back to Motion Prompt examples
Landing page & web effects · #03
Sticky header
The header stays at the top while the page scrolls. The announcement strip scrolls away, but the header below it stops at the top edge and the content scrolls underneath.
Scroll effectsstickysticky-headerfixed-headerposition-stickynavigationheaderscroll
Full motion specification
How the movement works
Use it to keep the menu and the call-to-action within reach on a long page.
- 01Scroll: 0→110 px at 0.4–1.3 s, 110→250 px at 1.9–2.8 s, 250→0 at 3.4–4.4 s (cubic ease-in-out).
- 02At the very top, a 22 px announcement strip (navy); below it a 34 px header (logo, three menu items, button).
- 03Header position = max(22 − scroll, 0): once the strip is gone, it stops at the top edge (position: sticky; top: 0).
- 04Over the next 24 px of scroll, a 12 px shadow under the header fades from 0 to 0.16 opacity.
- 05The content (photo, heading, three cards) scrolls normally under the header.
Prompt
Make the header a sticky header, with a soft shadow once it sticks to the top.