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 element

Example

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

Try it yourself

Elements with position: sticky; are positioned according to 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 in 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.

Σχετικές σελίδες

Οδηγός:Σχεδιασμός CSS - Θέση