How TO - Sticky Element
Learn how to create a sticky element with CSS.
Note: This example does not work in Internet Explorer or Edge 15 and earlier versions.
position: -webkit-sticky; /* Safari */
An element with
position: sticky; is positioned based on the user's scroll position.
A sticky element toggles between
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).
Note: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit-
prefix (see example below). You must also specify at least one of
sticky positioning to work.
To learn more about CSS positoning, read our CSS Position tutorial.