Sticky
You might say
Keep the navigation pinned to the top while people scroll down.
Keep an element visible after scrolling reaches itSticky positioning lets a header, table heading, or section navigation follow the viewport within its container. It needs a defined offset and enough room to move. Test parent overflow and small screens, because both can change or block sticky behavior.
Know first
You can say this to an AI Agent
Debug the sticky table header: confirm sticky and top, identify the actual scrolling ancestor, and inspect its overflow, height, and available scroll distance. Do not replace it with fixed or only raise z-index; verify it sticks only within the table container.
When to use it
- Keep table headers visible
- Keep section navigation nearby
- Hold important actions within a long panelFilter bar · sticky at top
- Pin a page header after it reaches the topposition: sticky; top: 0;
When NOT to use it
- Make several large regions sticky at onceAncestor: overflow: hiddenMay limit sticky’s scroll rangeCheck ancestor overflow, the scroll container, and the available scroll height.
- Cover the content people are trying to readFixed barfixed removes the bar from document flow and covers the first line of content.
- Expect sticky to work through a clipping parentSticky heading with a transparent background
- Use it on a small screen without checking remaining spaceSticky navigationSticky filtersSticky table header
Anatomy
top: 0Occupy space in the document flow without blocking others
sticky relatively recent scrolling ancestor adsorption
The element with position: sticky
When the scroll reaches a certain distance from the edge, it will be sucked. If you don’t write it, it will not take effect.
After sucking, the original position is still retained, and the content is not blocked.
Variants
Sticky Top
Scroll to the top of the header and navigation and click it.
Sticky Bottom
Scroll the bottom operation bar all the way to stick it
Group Headers
Address book letter, date group title
Typical use cases
Table header
TaskOwnerStatus
Login page revisionAlex ChenIn progress
Payment process reviewAkaiCompleted
Design specification v2 archiveTeacher BaiNot started
Documentation sidebar
A
AkaiFront end
A MayOperation
B
Teacher BaiDesign
Page toolbar
Near subway
Can cook
Mountain Guest House · Genting
Dali · East Gate of the Ancient City · ¥688/night
Woodhouse · Valley
Moganshan · Yu Village · ¥520/night
Section heading
Summer seaside postcard set ×1
¥ 39.00
Cat photography album "Light on the Windowsill" ×1
¥ 128.00
City Walking Map · Guangzhou ×2
¥ 58.00
Total ¥ 283.00
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check