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.