CSS property reference: position: sticky

When you apply the position: sticky property to an element, that element will be positioned according to the normal document flow.

So, it’ll scroll along with its container as usual, until it is at the top of the container (i.e., the top edge of the element is at the top of the container).

At that point, the element will stick to the top of the container and stop scrolling. Here’s a video demonstration that uses an example from MDN.

Sources

• CSS position – MDN docs