Position sticky в CSS: отступ, прокрутка и границы контейнера

Содержание статьи

Чтобы элемент с position: sticky прилипал по вертикали, задайте неавтоматический отступ, например top: 16px, проверьте его контейнер прокрутки и наличие места внутри ограничивающего блока. Sticky сохраняет место в обычном потоке и не должен восприниматься как fixed, который можно закрепить независимо от окружающей структуры.

В примере Mentoring.digital боковая памятка остаётся рядом с длинным учебным текстом. На узком экране она возвращается в обычный поток, чтобы не занимать значительную часть окна.

Минимальный пример боковой панели

<div class="layout">
  <aside class="memo">Короткая памятка</aside>
  <main class="content">
    <h1>Учебный материал</h1>
    <p>Здесь находится длинный текст с разделами.</p>
  </main>
</div>

.layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.memo {
  position: sticky;
  top: 1rem;
  padding: 1rem;
  background: #edf4ff;
}
.content { min-height: 140vh; }

@media (max-width: 48rem) {
  .layout { grid-template-columns: 1fr; }
  .memo { position: static; }
}

min-height здесь нужен только для учебной демонстрации прокрутки. В реальной странице высоту обычно формирует содержимое. align-items: start не даёт панели растянуться на всю высоту строки Grid. Если панель уже равна высоте доступной области родителя, заметного пути для прилипания может не остаться.

Сначала проверьте отступ

Значение position: sticky без порога не определяет, у какой границы нужно удерживать элемент. Если обе inset-настройки выбранной оси равны auto, поведение по этой оси соответствует relative. Для вертикального сценария обычно начинают с top или логического inset-block-start.

Если на сайте есть фиксированная шапка, учтите её высоту в отступе. Иначе панель может прилипать правильно, но оказываться под шапкой. Это отдельная проблема перекрытия, а не доказательство поломки sticky.

Затем найдите контейнер прокрутки

Sticky ориентируется на ближайшего предка с механизмом прокрутки. Его способны создать значения overflow hidden, auto, scroll или overlay, даже если этот предок фактически не прокручивается пользователем. Поэтому элемент может следовать совсем не тому скроллу, который вы наблюдаете.

Посмотрите вычисленные значения overflow у предков в инструментах разработчика. Проверяйте обе оси: настройка одной может повлиять на вычисленное значение другой. Не удаляйте overflow у всей страницы вслепую, поскольку он может выполнять нужную задачу обрезки или прокрутки.

Проверьте размеры и ограничивающий блок

Sticky остаётся связанным с границами своего блока. Если родитель заканчивается, панель не обязана оставаться наверху окна дальше. Если сама панель выше видимой области, ожидаемое поведение тоже нужно пересмотреть: например, сократить её, перенести в обычный поток или отдельно спроектировать прокрутку.

В Grid и Flex проверьте растяжение элемента по поперечной оси. Иногда достаточно align-self: start у конкретной панели. Это исправление подходит только тогда, когда проблема действительно связана с растяжением, а не с неверным scroll-контейнером.