Interactions · Scrolling
Sticky
Also called: Sticky header, Sticky positioning, position: sticky, Fixed header
An element stays pinned once it scrolls to the top edge, like a navbar, a table header, or a section heading that stops at the top while you scroll.
In detail
Sticky uses CSS position: sticky plus top: 0. The element starts out moving with the normal content. Once it scrolls to 0 from the top, it "sticks" there until its parent element scrolls out of view entirely. Common uses: the top navbar, the header row of a long table, the letter headings in a contacts list, and the tab bar on a detail page.
How it differs from position: fixed: fixed is pinned to one spot on the screen from the start and taken out of normal layout; sticky is part of normal layout until it reaches the threshold. Sticking to the bottom instead uses bottom: 0.
Common reasons sticky doesn't work: an ancestor has overflow: hidden, there's no top value, or the parent is the same height as the element so there's no room to scroll. Give sticky elements a background color and a suitable z-index, so content doesn't cover them or show through.
Developer infoTerm ID, DOM cues, match priority
- Term ID
interaction-sticky- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026