Що робить position: sticky?

CSSJunior~1 хв читання

position: sticky поєднує поведінку relative і fixed.

Як працює:

поки елемент у межах видимої області не досяг порогу, він поводиться як relative: перебуває в потоці й займає своє місце;
коли під час прокрутки він досягає заданого значення top, left, right або bottom, він «прилипає» і поводиться як fixed, залишаючись на екрані.

Приклад:

css

header {
  position: sticky;
  top: 0;
}

Особливості:

елемент залишається в потоці (на відміну від fixed);
координати top/bottom обов'язкові для спрацювання;
«прилипання» працює у межах свого контейнера, що прокручується, а не всієї сторінки.

Підсумок: sticky - це позиціонування, при якому елемент залишається в потоці, але фіксується на екрані під час прокрутки після досягнення заданого порогу.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.