Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як працює механізм «прилипання» під час скролу?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Механізм «прилипання»** (`position: sticky`) заснований на порівнянні позиції елемента зі скролом усередині його контейнера та перемиканні режиму відображення: до порогу елемент поводиться як `relative`, після порогу - як `fixed`. **Ключове:** механізм - це фактично динамічне перемикання режиму позиціонування на льоту під час скролу.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняМеханізм «прилипання» (`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` - у межах батьківського елемента → до моменту, коли той закінчиться Механізм - це фактично **динамічне перемикання режиму позиціонування на льоту під час скролу**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.