Sticky header
Also called: sticky navbar, fixed header, condensing header, shrinking header.
A header that stays at the top of the screen while the page scrolls under it. If it also gets shorter once you start scrolling, it's a condensing header.
Scroll inside the little page. Its header sticks, then condenses.
Sticky top
Say it in a prompt
A sticky header that stays at the top while scrolling. After the user scrolls 40px it condenses with a smaller logo, a bottom border and a translucent blurred background. Seen on
- Apple AirPods Pro 3: The product bar sticks to the top as you scroll and turns see-through with a blur behind it.
- Vercel: The header stays at the top; it is transparent at first and gets a background and a thin bottom line once you scroll.
You might describe it as
- the menu bar on the apple page that stays up top and gets see-through
- the menu bar that follows you down the page
- top bar stays stuck when I scroll
- navigation that never leaves the top of the screen
Not to be confused with
- Pinning
A sticky header stays at the top for the whole page; pinning holds a section only for a while.