CSS position: sticky
An element with position: sticky; toggles between a relative and fixed position, depending on the scroll position.
A sticky element is positioned relative until a certain scroll position is reached - then it "sticks" in that place (like position:fixed).
Note: You must specify at least one of the
top,right,bottomorleftproperties, for sticky positioning to work.
In this example, when the sticky element reach the top of the page (top: 0), it sticks to this position:
Example
div.sticky {
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Common Uses for Sticky Positioning
Sticky positioning is commonly used for:
- Sticky headers - Navigation bars that stick to the top when scrolling
- Sticky sidebars - Side content that stays visible while scrolling main content
- Sticky table headers - Table headers that remain visible when scrolling long tables
Sticky vs. Fixed
The key differences between sticky and fixed positioning:
| Feature | position: sticky | position: fixed |
|---|---|---|
| Initial behavior | Acts like relative |
Always fixed to viewport |
| Space in document | Takes up space initially | Does not take up space |
| Scroll behavior | Sticks after threshold | Always fixed |
| Container bound | Yes, respects parent boundaries | No, always relative to viewport |
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |
