position: sticky — In Flow Until It Sticks

Sticky is the hybrid: an element flows normally until it would scroll out of view, then it pins to a viewport edge. Section headers, table headers, and sticky filters all use this.

Step 1 of 2

Sticky has two modes — automatically

position: sticky behaves like relative until the user scrolls the element to a threshold (set with top, bottom, etc.) — at that point it switches to behaving like fixed, pinning to the viewport. When the user scrolls back, it un-pins and rejoins normal flow.

You always pair sticky with at least one offset. position: sticky; top: 0; means: 'flow normally until you would scroll past the top of the viewport, then stick to the top'.

Think of it this way: It is the photo on a school yearbook page that sits in flow until the binding catches it on the cover — then it stays pinned to the spine while you flip past, and falls back into place when you turn back.

Tip

Sticky is scoped to its parent. The element will stop sticking when its parent scrolls out of view. That is by design — perfect for section headers that stick within their own section.

Learn more on MDN

CSSMDN: position: sticky

HTMLREAD ONLY

PREVIEW