Свойство position: sticky — одно из тех нововведений CSS, про которое слышали все, а нормально работает оно у каждого второго. Идея простая: элемент ведёт себя как обычный, пока вы скроллите страницу мимо него, и «прилипает» к указанному краю окна, как только пользователь продолжает прокрутку. В реальности же половина джунов натыкается на известные грабли и в конце сдаётся, переключаясь на position: fixed с костылями.
В этой статье — концепция sticky на пальцах, шесть типичных причин, по которым оно не работает, и семь готовых кейсов с живыми CodePen-демо: липкий header, sticky-подзаголовки секций, шапка таблицы, sidebar, нижний CTA, stuck-эффект на карточке и sticky footer. Плюс — границы применимости и когда от sticky всё-таки разумно отказаться в пользу JavaScript.
Как sticky устроен на самом деле
Sticky — это не отдельный режим позиционирования, как кажется, а гибрид двух уже знакомых. До тех пор, пока край sticky-элемента не упёрся в указанный top / bottom / left / right, он ведёт себя ровно как position: relative — занимает место в потоке, влияет на соседей, может смещаться через transform. Как только край упёрся — sticky переключается в режим, похожий на position: fixed: элемент остаётся на месте относительно области видимости, а контент под ним продолжает скроллиться.
Ключевая деталь, которую часто упускают: sticky-элемент липнет не к окну браузера в целом, а к границе ближайшего scroll-контейнера — то есть ближайшего родителя, у которого скролл вообще возможен. В 90% случаев это сам <html>, но если выше по дереву есть, например, overflow: auto — sticky будет липнуть внутри этого блока, а не страницы.
Минимальный рабочий пример — липкий заголовок, который остаётся у верха окна при прокрутке:
.section-header {
position: sticky;
top: 0;
background: #fff;
padding: 12px 16px;
border-bottom: 1px solid #e6e6e6;
}Никакого JavaScript, никакого слежения за позицией скролла — четыре строки CSS и эффект готов. Дальше пройдёмся по тому, что чаще всего ломает эту простую схему.
Почему sticky не работает: шесть типичных причин
Sticky-позиционирование — рекордсмен по числу «да-я-всё-сделал-по-туториалу-но-почему-не-липнет». Шесть причин ниже закрывают примерно 95% таких случаев.
1. Забыли указать top или bottom
Sticky без offset — это просто relative. Браузеру не к чему прилипать. Указали top: 0 — прилипнет к верху, bottom: 0 — к низу, top: 80px — к верху со смещением (полезно, если над sticky-элементом сидит фиксированный header).
/* Не работает: sticky без offset */
.broken { position: sticky; }
/* Работает: указан край */
.fixed { position: sticky; top: 0; }2. У родителя стоит overflow: hidden / auto / scroll
Любое значение overflow, отличное от visible, делает этого родителя самостоятельным scroll-контейнером. Sticky внутри начинает липнуть к границам этой коробки, а не к окну. Если коробка статичная и не скроллится сама — sticky-эффект пропадает совсем.
/* Sticky внутри этого родителя работать не будет:
родитель не скроллится, а краёв страницы он не видит */
.parent { overflow: hidden; height: auto; }
.parent .header { position: sticky; top: 0; }Особенно коварно то, что overflow: hidden часто ставят на родителях не ради скролла, а «на всякий случай» — чтобы обрезать вылезающую тень или абсолютный потомок. И потом долго ищут, почему sticky сломался: правильный ответ — убрать overflow у первого родителя выше по дереву и заменить чем-то другим.
3. Sticky-элемент по высоте равен своему контейнеру
Если sticky-элемент по высоте занимает весь scroll-контейнер — ему просто некуда прилипать: пока он виден целиком, прокрутки внутри контейнера не происходит. Чаще всего так ломается sticky-sidebar в флекс/грид-разметке, где боковая колонка автоматически растягивается на высоту контентной.
4. Sticky внутри display: flex со align-items: stretch
По умолчанию у флекс-контейнера выравнивание элементов — stretch. Это значит, что флекс-айтемы растягиваются на высоту родителя. Если ваш sticky-элемент — такой флекс-айтем, он окажется в ловушке из предыдущего пункта.
.layout {
display: flex;
/* align-items: stretch — значение по умолчанию,
из-за него .sidebar растягивается на высоту .content */
}
.sidebar {
position: sticky;
top: 0;
/* НЕ РАБОТАЕТ: высота .sidebar равна высоте .layout,
прилипать не к чему */
}
/* Решение */
.layout { align-items: flex-start; }5. Sticky внутри display: grid без явного align-self
В гридах поведение по умолчанию аналогичное — align-items: stretch. Лечится так же: align-items: start на контейнере или align-self: start на конкретном sticky-айтеме.
.layout {
display: grid;
grid-template-columns: 240px 1fr;
align-items: start; /* без этого .sidebar растянется */
}6. Sticky на <th> внутри <table>
Долгое время браузеры отказывались применять sticky к ячейкам таблицы напрямую: эта комбинация не работала ни в одном Chromium-движке вплоть до относительно недавних версий. Сейчас sticky-thead и sticky-первая-колонка работают повсеместно, но с двумя обязательными условиями. Первое — для самой таблицы должно быть выставлено border-collapse: separate (значение по умолчанию — separate, но во многих CSS-сбросах его меняют на collapse, отсюда и проблема). Второе — sticky навешивается не на <tr> и не на <thead>, а на сами ячейки.
/* Так не сработает */
table { border-collapse: collapse; }
thead { position: sticky; top: 0; }
/* Так — сработает */
table { border-collapse: separate; border-spacing: 0; }
thead td { position: sticky; top: 0; background: #fff; }Кейс 1. Липкая шапка сайта
Самый базовый и узнаваемый сценарий: основная навигация остаётся у верха окна при любой длине прокрутки. До эпохи sticky это делалось через position: fixed с явным padding-top на основном контенте, чтобы он не уезжал под шапку. Sticky закрывает этот сценарий без дополнительных отступов: элемент сам «занимает место» в потоке, пока не доехал до точки прилипания.
header.site-nav {
position: sticky;
top: 0;
z-index: 100;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}Обратите внимание на z-index: 100. В обычном потоке header лежит ниже всего, что идёт после него по DOM, поэтому без явного z-index при прокрутке под шапку начнут выезжать тени и popover-меню следующих секций. Тень снизу (box-shadow) — необязательная, но привычная глазу деталь: визуально подсказывает, что шапка теперь «парит» над контентом.
Кейс 2. Подзаголовки секций, сменяющие друг друга
Эффект, который Apple использует в списке контактов на iOS: заголовки А, Б, В… сменяют друг друга при скролле длинного списка. Каждый sticky-подзаголовок прилипает к верху до тех пор, пока его не «вытолкнет» следующий sticky. В CSS реализуется естественно — ничего специально делать не надо: достаточно, чтобы у каждой группы был свой sticky-заголовок.
<section>
<h2 class="letter">А</h2>
<ul><li>Анна</li><li>Алексей</li></ul>
</section>
<section>
<h2 class="letter">Б</h2>
<ul><li>Борис</li><li>Богдан</li></ul>
</section>.letter {
position: sticky;
top: 0;
background: #f3f3f3;
padding: 8px 16px;
margin: 0;
font-size: 18px;
font-weight: 700;
}Магия в том, что sticky-scope каждого заголовка — это его секция-родитель. Когда вы доскроллили до следующей секции, край предыдущей упирается в верх окна и старый заголовок выталкивается, а новый занимает его место. Никаких JavaScript-обработчиков скролла.
Кейс 3. Зафиксированная шапка таблицы
Длинная таблица с десятками строк — типичная ситуация, в которой пользователь теряет контекст: проскроллил вниз, забыл, что значит каждая колонка. Sticky-thead закрывает это идеально: заголовки колонок остаются у верха при вертикальном скролле. Если ширина таблицы тоже не помещается на экран — добавляется sticky-первая колонка.
table.data {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
table.data thead td {
position: sticky;
top: 0;
background: #fafafa;
border-bottom: 2px solid #e6e6e6;
z-index: 2;
}
/* Sticky первая колонка */
table.data tbody td:first-child,
table.data thead td:first-child {
position: sticky;
left: 0;
background: #fff;
z-index: 1;
}
/* На пересечении — верхний z-index, чтобы шапка
не пряталась за первой колонкой при горизонтальном скролле */
table.data thead td:first-child { z-index: 3; }Тонкость с z-index здесь критична: в комбинации sticky-thead + sticky-first-col на пересечении должна оказаться именно ячейка шапки. Иначе при одновременном скролле по обеим осям одна из них «ныряет» под другую.
Из соображений семантики и доступности можно оставить <th> в HTML — для скринридеров это правильная разметка. Но визуально стилизуем именно td/th в шапке через атрибут scope="col". Доступность не страдает, sticky работает.
Кейс 4. Sticky-sidebar в длинной статье
Боковая колонка с оглавлением или CTA, которая остаётся видимой, пока пользователь читает длинный текст. Самая частая разметка в наше время — CSS Grid в две колонки.
.article-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: 48px;
align-items: start; /* критично! */
}
.article-layout aside {
position: sticky;
top: 24px;
align-self: start;
}Здесь сразу три ловушки. Первая — align-items: start на контейнере (без неё боковая колонка растянется на высоту статьи и прилипать не будет). Вторая — align-self: start на самом aside для подстраховки (если кто-то выше по дереву или в @media-блоке переопределит alignment). Третья — top: 24px, а не top: 0: визуально приятнее, когда между sidebar и верхом окна остаётся воздух.
Если контент в sidebar внезапно длиннее окна браузера (длинное оглавление с 30 пунктами) — sticky-эффект применяется только пока этот контент не упёрся в нижний край viewport, а дальше элемент уезжает вверх вместе со скроллом. Лечится либо обрезкой содержимого по max-height: calc(100vh - 48px) с собственным overflow: auto, либо принципиально другим подходом — sticky на каждом разделе оглавления.
Кейс 5. Нижняя CTA-полоса, которая ловит юзера до конца экрана
Обратная задача: CTA-кнопка или промо-плашка, которая остаётся внизу окна, пока пользователь скроллит контент — и уезжает в общий поток только в самом конце страницы, чтобы не загораживать футер. Делается через position: sticky; bottom: 0;.
.bottom-cta {
position: sticky;
bottom: 0;
background: #20232a;
color: #fff;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}Чтобы CTA-полоса именно «ловила» пользователя, она должна быть последним элементом скролл-контейнера — обычно перед футером сайта. Когда пользователь долистал до футера, sticky-блок упёрся в нижнюю границу своего родителя и уехал вместе с потоком.
Этот же приём отлично подходит для нижнего бара с навигацией (back / next) в длинной статье или в шаге онбординга — пользователь всегда видит кнопки, не приходится скроллить вниз, чтобы «продолжить».
Кейс 6. Stuck-state: карточка визуально меняется, когда прилипла
В чистом CSS долго не было способа узнать «элемент сейчас в режиме липкости или нет» — псевдокласса :stuck в спецификации нет (хотя обсуждается уже несколько лет). До недавнего времени единственным решением было повесить IntersectionObserver на элемент-сентинель перед sticky-блоком: пока сентинель в viewport — блок не прилип, как только сентинель вышел — прилип, и нужно подменять класс.
Сейчас тот же эффект достигается без JavaScript через scroll-driven animations (Chromium-семейство и Firefox с флагом). Идея: анимация-таймлайн привязывается не ко времени, а к позиции скролла. На определённой позиции у sticky-блока меняется фон, появляется тень, сжимается padding — что угодно из ваших фантазий.
@keyframes stuck-state {
0% { box-shadow: 0 0 0 transparent; padding: 24px 16px; }
100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); padding: 8px 16px; }
}
.sticky-card {
position: sticky;
top: 0;
background: #fff;
animation: stuck-state linear both;
animation-timeline: scroll(nearest);
animation-range: 0 80px;
}Что здесь происходит: animation-timeline привязывает анимацию к скроллу ближайшего родителя, а animation-range говорит «применяй анимацию от 0 до 80 пикселей прокрутки». К моменту, когда страница пролистана на 80px, sticky-карточка как раз доехала до точки прилипания и одновременно завершила анимацию — визуально это выглядит, как будто карточка «поняла», что прилипла.
Это передовая фишка, поддержка не во всех браузерах — в Safari её ещё нет; в Firefox под флагом. Для production-кода с гарантированной кросс-браузерностью пока остаётся IntersectionObserver-вариант. Демо ниже — именно с JS-фолбеком, чтобы работало везде.
Кейс 7. Sticky footer: внизу при коротком контенте, в потоке при длинном
Классический паттерн, на который ушло лет десять CSS-фолклора, — футер, который при коротком контенте прижат к низу окна, а при длинном уезжает в обычный поток после контента. До флекс/грид-эры это решалось через костыли с margin-top: auto на пустом элементе перед футером. С появлением CSS Grid и Flexbox задача стала однострочной.
Минималистичное решение через grid:
body {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
/* header — auto, main — 1fr (растягивается), footer — auto */
}Тут sticky как такового нет — задача решается grid-layout. Но если хочется именно «футер липнет к низу окна на длинной странице, пока не доехали до самого его места» — это уже sticky-bottom, и реализация почти как в кейсе 5:
footer {
position: sticky;
bottom: 0;
background: #fafafa;
padding: 16px;
border-top: 1px solid #e6e6e6;
}Разница в семантике использования. Grid-решение — для общего шаблона страницы «футер всегда снизу, не выше». Sticky-bottom — для футера, который сопровождает чтение и уезжает только в самом конце.
Тонкости, о которых редко пишут
Несколько менее очевидных деталей, на которые натыкаешься уже в продакшене.
Вложенные sticky-элементы
Если в одной странице есть и липкая шапка сайта, и липкие подзаголовки секций — они нормально сосуществуют, но подзаголовкам нужно прилипать не к нулю, а к высоте шапки. Иначе подзаголовок прячется под шапкой.
header.site-nav { position: sticky; top: 0; height: 64px; }
.section-title {
position: sticky;
top: 64px; /* высота шапки */
}Если шапка адаптивная и меняет высоту на мобильных — вычисляется через CSS-переменную:
:root { --nav-height: 64px; }
@media (max-width: 640px) {
:root { --nav-height: 48px; }
}
header.site-nav { height: var(--nav-height); }
.section-title { top: var(--nav-height); }z-index в stuck-состоянии
Sticky-элемент в момент прилипания не получает автоматически новый z-index, в отличие от position: fixed. Если у вас есть выпадающие меню, тултипы или popover-ы в основной области — они могут уехать под sticky-шапку, потому что технически шапка находится в обычном потоке. Лечится явным z-index у самой шапки.
Sticky и overflow в горизонтальной скролл-карусели
Внутри горизонтального скролла (например, lazy-загружаемой ленты карточек) sticky-блок начинает липнуть к левому или правому краю скролл-контейнера. Это полезно, например, для зафиксированной первой колонки в таблице (кейс 3), но неожиданно для тех, кто этого не закладывал. Если sticky-вёрстка ведёт себя «странно» и липнет горизонтально, а не вертикально, — ищите overflow-x по дереву.
Поддержка браузерами
Sticky — одно из самых давно стабильных нововведений CSS из числа полезных. Без префиксов работает во всех живых браузерах. Конкретно для thead-ячеек таблиц у Firefox долго был баг, поэтому минимальная версия там сильно позже, чем общая поддержка sticky как такового. Если у вас среди пользователей встречаются старые Safari — имейте в виду, что Safari исторически поддерживает sticky через -webkit--префикс; в современных версиях префикс не нужен.
Когда от sticky всё-таки разумно отказаться
Есть три сценария, в которых sticky хуже альтернатив, хотя поначалу кажется решением по умолчанию.
Нужны коллбэки на «прилипло / отлипло». В чистом CSS на это нет API, и пока spec-черновик с псевдоклассом :stuck не дошёл до прод-браузеров — коллбэки реализуются только через JS. Решение — IntersectionObserver на элементе-сентинеле перед sticky-блоком:
const sentinel = document.querySelector('.sticky-sentinel');
const card = document.querySelector('.sticky-card');
const obs = new IntersectionObserver(([entry]) => {
card.classList.toggle('is-stuck', !entry.isIntersecting);
});
obs.observe(sentinel);Сентинель — пустой div в DOM прямо перед sticky-карточкой. Пока он виден в окне — карточка ещё не прилипла; как только сентинель уехал за верхнюю границу — isIntersecting становится false, и мы навешиваем класс is-stuck.
Элемент должен быть всегда виден, независимо от скролла. Это уже не sticky, а классический position: fixed. Sticky уезжает в общий поток, когда заканчивается его scroll-scope, — для основного header это нормально, для модального диалога или плавающей кнопки помощи — нет.
Сложная анимация при прилипании. Если эффект stuck-state нужен богаче, чем смена padding и тени — например, морфинг формы или прогрессивное превращение баннера в компактный значок — разумнее идти в scroll-driven animations или CSS view transitions с JS-триггером, а не выкручивать sticky одними CSS-переменными.
Итог: алгоритм выбора
Если коротко свести всё в чек-лист, который удобно проверять, выбирая позиционирование:
- Нужен липкий заголовок или sidebar, который уезжает вместе с секцией? — position: sticky с top или bottom.
- Нужен элемент, всегда видимый поверх всего? — position: fixed, sticky тут не подойдёт.
- Нужен коллбэк на «прилипло / отлипло»? — sticky + IntersectionObserver на сентинеле.
- Нужен богатый stuck-эффект без JS? — scroll-driven animations (с пониманием, что Safari ещё не подключился).
- Sticky «не работает»? — пройдитесь по шести причинам из второго раздела этой статьи. Скорее всего, причина — одна из них.
Sticky-позиционирование — редкий случай, когда четыре строки CSS закрывают сценарий, для которого десять лет назад писали полсотни строк JS с обработчиком scroll. Главное — помнить про scroll-контейнеры, overflow и про то, что sticky-элемент по высоте должен быть меньше своего родителя. Остальное — уже вариации семи кейсов выше.
Комментарии (0)