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.

Troubleshoot

If the position: sticky; rule isn’t working as expected, see if there is an ancestor element that has overflow: hidden. You might need to remove the overflow: hidden property from that ancestor element. Ensure you check the side-effects elsewhere in your UI if you do that.

Sources

• CSS position – MDN docs