Sticky header

position:sticky закрепляет элемент относительно ближайшего скроллируемого контейнера, пока тот в зоне видимости.

Код

<div style="height:150px;overflow:auto;border:1px solid #ccc">
  <header style="position:sticky;top:0;background:#1f6feb;color:#fff;padding:0.75rem">Липкий заголовок</header>
  <p style="padding:1rem">Контент 1</p>
  <p style="padding:1rem">Контент 2</p>
  <p style="padding:1rem">Контент 3</p>
  <p style="padding:1rem">Контент 4</p>
</div>

Предпросмотр

Пояснение

top:0 определяет, на каком расстоянии от верха контейнера элемент "прилипает". sticky работает только внутри родительского блока со своим скроллом или как часть скроллируемой страницы.

Если sticky не работает — проверьте, нет ли у родительского элемента overflow:hidden, это блокирует sticky.

Sticky header

Код

Предпросмотр

Пояснение

Похожие инструменты

Accordion (details/summary)