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
When to use it
- Keep table headers visible
- Keep section navigation nearby
- Hold important actions within a long panel
- Pin a page header after it reaches the top
When NOT to use it
- Make several large regions sticky at once
- Cover the content people are trying to read
- Expect sticky to work through a clipping parent
- Use it on a small screen without checking remaining space
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
Further reading