//in this example, the sticky element sticks to the top of the page (top: 0),
//when you reach its scroll position
position: -webkit-sticky; /* Safari */
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).