Sticky Position

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

<iframe src="trycss_position_sticky_ifr.htm" style="width:100%;border:4px solid #e5e5e5"></iframe>

Note: 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:

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:

All CSS Positioning Properties