Skip to main content

Як працює механізм «прилипання» під час скролу?

CSSJunior~1 хв читання
Запропонувати правку

Механізм «прилипання» (position: sticky) заснований на порівнянні позиції елемента зі скролом усередині його контейнера та перемиканні режиму відображення.

Працює так:

1) Старт: елемент поводиться як relative

Елемент займає місце в потоці й рухається разом зі сторінкою, поки під час прокрутки його верхній (або інший) край не досягне заданого порогу, наприклад:

css
element { position: sticky; top: 0; }

2) Момент прилипання

Коли за розрахунками браузера елемент має перетнути лінію top: 0 (або top: 10px, якщо так задано), він зупиняється і «прилипає» до цієї точки, ніби став fixed.

На цьому етапі він:

  • залишається на екрані,
  • при цьому продовжує резервувати місце в потоці (важлива відмінність від fixed).

3) Обмеження контейнером

Елемент «прилипає» лише в межах свого контейнера, що прокручується. Якщо контейнер закінчився (дочірній елемент доїхав до нижньої межі батьківського елемента), прилипання припиняється, і елемент знову рухається разом із контентом.

Щоб sticky спрацював, мають виконуватися умови

  • заданий top, bottom, left або right
  • у батьківського елемента немає overflow: hidden|auto|scroll (інакше прилипання відбувається лише всередині цього контейнера)
  • елемент перебуває у блочному нормальному потоці (не absolute, не fixed)

Коротке резюме

  • до порогу → як relative
  • після порогу → як fixed
  • у межах батьківського елемента → до моменту, коли той закінчиться

Механізм - це фактично динамічне перемикання режиму позиціонування на льоту під час скролу.

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

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

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

Запропонувати правку