Народ, всем привет. Position: sticky это некое и довольно редко используемое (а зря) значение CSS-свойства position, которое сочетает в себе поведение relative и fixed. Оно позволяет элементу вести себя как обычный блочный элемент, пока он находится в пределах родительского контейнера, а затем «прилипать» к заданной позиции при прокрутке страницы. Это свойство можно использовать для закреплённых заголовков, меню, боковых панелей и навигации. Как? А вот сегодня давайте и разберемся.
Как работает position: sticky
Элемент со значением sticky сначала располагается относительно своего обычного места в потоке документа, как при position: relative. Однако когда пользователь прокручивает страницу и элемент достигает указанного порога (top, bottom, left или right), он начинает вести себя как position: fixed, оставаясь на экране.
Тут важно, что элемент остаётся «прилипшим» только в пределах своего родителя. Как только родительский контейнер заканчивается, элемент перестаёт быть фиксированным.
.sticky {
position: sticky;
top: 0;
}
Так сказать, минимально необходимы это само свойство position: sticky, а также хотя бы одно свойство смещения (top, bottom, left, right). В примере выше без указания top (или другого направления) sticky работать не будет. Самый простой и частый пример, это «липкий заголовок». В этом примере заголовок будет прокручиваться как обычный элемент, но как только он дойдёт до верхней границы окна браузера, он «прилипнет» и останется видимым.
<h2 class="sticky-title">Заголовок раздела</h2>
<p>Длинный текст...</p>
.sticky-title {
position: sticky;
top: 0;
background: white;
padding: 10px;
border-bottom: 1px solid #ccc;
}
Давайте еще примерчик. Вот sticky внутри контейнера, и здесь боковое меню будет закреплено при прокрутке, но только пока прокручивается контейнер .container. Когда контейнер закончится, sticky перестанет работать.
<div class="container">
<div class="sidebar">Меню</div>
<div class="content">Контент...</div>
</div>
.container {
display: flex;
}
.sidebar {
position: sticky;
top: 20px;
width: 200px;
}
.content {
height: 2000px;
}
Чем sticky отличается от fixed
По факту оба свойства зависят от прокрутки, однако sticky ограничен своим родителем, а вот fixed нет. Но это как может быть минусом, так и плюсом, ведь fixed частенько «выпадает из потока», тогда как можно аккуратненько оставить в общем потоке и «увести», когда он ен нужен. Еще можно сказать, что fixed всегда привязан к окну браузера, а sticky к своему контейнеру.
По факту position: sticky это мощный и удобный инструмент CSS, который позволяет создавать «прилипающие» элементы без JavaScript. Он идеально подходит для заголовков, меню, фильтров и навигации внутри страницы. Главное тут просто помнить о его ограничениях: обязательное свойство top, влияние overflow и зависимость от родительского контейнера. При правильном использовании sticky делает интерфейсы более удобными и современными.
Кстати, о поддержке браузерами. Position: sticky поддерживается всеми современными браузерами (Chrome, Firefox, Edge и Safari). Проблемы могут возникать только в очень старых версиях браузеров (например, Internet Explorer, где sticky не поддерживается).
Канал «Т.Е.Х.Н.О Windows & Linux» — экспертные статьи, реальные гайды, настройка ПК, приватность и оптимизация. Всё бесплатно и без платных подписок!
Присоединяйся, чтобы стать профи!
Частые ошибки
1. Нет свойства top
position: sticky; /* не будет работать */
2. Родитель имеет overflow: hidden/auto/scroll, position: sticky не работает, если у родителя (или любого предка) задан overflow, кроме visible.
.parent {
overflow: hidden;
}
3. Недостаточно места для прокрутки, если высота контейнера меньше высоты элемента, эффект не проявится.
4. Не работает с display: table-cell. Да, sticky может работать некорректно с таблицами и некоторыми типами layout’ов.
Но при этом тот же горизонтальный sticky, хоть и используется редко, но полезно для таблиц с горизонтальной прокруткой (например, закреплённый первый столбец).
.sticky-box {
position: sticky;
left: 0;
}
А вот так можно сделать «липкую» шапку таблицы. Главное просто не задавать overflow родительскому контейнеру таблицы.
th {
position: sticky;
top: 0;
background: #f5f5f5;
}
По итогу, если нужно закрепить элемент в пределах блока, вам важна простота без JavaScript, требуется адаптивное поведение и, скажем, элемент не должен постоянно быть фиксированным, то это то, что вам нужно. Просто не используйте sticky, если элемент должен быть всегда видимым независимо от структуры страницы, в этом случае лучше position: fixed.
Кстати, у нас есть и другой канал, FIT FOR FUN, про фитнес, бодибилдинг, правильное питание, похудение и ЗОЖ в целом. Кому интересно, ждем вас в гости!