position: sticky;

position: sticky;

//in this example, the sticky element sticks to the top of the page (top: 0),
//when you reach its scroll position

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}
  • An element with position: sticky; is positioned based on the user's scroll position.
  • A sticky element toggles between relative and fixed, depending on the scroll position.
  • It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Related concepts

position: sticky;

position: sticky; — Structure map

Clickable & Draggable!

position: sticky; — Related pages: