An element with position: sticky; is positioned based on the user's scroll position

div.sticky {
  background-color: yellow;
  position: sticky;
  top: 0;
}

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