How to create: sticky elements

Learn how to use CSS to create sticky elements.

Try it yourself

Note:This example does not apply to Internet Explorer or Edge 15 and earlier versions.

Sticky elements

Example

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Try it yourself

Elements with position: sticky; are positioned based on the user's scroll position.

Sticky elements switch between relative positioning and fixed positioning depending on the scroll position. Before reaching the given offset position within the viewport, it is relatively positioned, and then it 'sticks' in place (like position: fixed).

Note:Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires the -webkit- prefix (see the example below). To make sticky positioning work, you must also specify at least one of top, right, bottom, or left.

Related Pages

Tutorial:CSS Positioning