CSS Sticky Positioning

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).

You must specify at least one of the top, right, bottom or left properties, 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:

position:

Sticky positioning is commonly used for:

• Navigation bars that stick to the top when scrolling

• Side content that stays visible while scrolling main content

• Table headers that remain visible when scrolling long tables Sticky vs. Fixed The key differences between sticky and fixed positioning:

Yes, respects parent boundaries No, always relative to viewport

Sets the bottom margin edge for a positioned box clip

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