Пошук уроків, статей та іншого контенту
Створите елементи, що прокручуються до заданої межі, а потім залишаються видимими в межах контейнера.
position: stickyposition: sticky поєднує поведінку relative і fixed:
Спочатку елемент знаходиться у звичайному потоці документа.
Під час прокручування він рухається разом із контейнером.
Коли елемент досягає заданої межі, наприклад top: 0, він залишається видимим.
Коли прокручування досягає кінця батьківського контейнера, sticky-елемент більше не рухається за його межі.
.heading {
position: sticky;
top: 0;
}У цьому прикладі елемент прилипає до верхньої межі доступної області.
На відміну від position: fixed, sticky-елемент:
залишається частиною звичайного потоку;
займає місце в документі;
прилипає лише в межах свого контейнера;
не залишається видимим після завершення батьківського контейнера.
Основна властивість:
.element {
position: sticky;
}Потрібно також вказати межу, до якої елемент має прилипнути:
.element {
position: sticky;
top: 16px;
}Доступні межі:
top — відстань від верхньої межі;
right — відстань від правої межі;
bottom — відстань від нижньої межі;
left — відстань від лівої межі.
Наприклад, елемент може прилипати до нижньої межі:
.element {
position: sticky;
bottom: 0;
}Для вертикального прокручування найчастіше використовують top, а для горизонтального — left.
Нижче бічна панель прилипає до верхньої частини вікна під час прокручування. Вона залишається видимою лише в межах батьківського контейнера .layout.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sticky-позиціонування</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
color: #1f2937;
background: #f3f4f6;
}
header {
padding: 24px;
color: white;
background: #2563eb;
text-align: center;
}
.layout {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 32px;
max-width: 1000px;
margin: 32px auto;
padding: 0 20px;
align-items: start;
}
.navigation {
position: sticky;
top: 20px;
padding: 20px;
border: 1px solid #d1d5db;
border-radius: 12px;
background: white;
box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}
.navigation h2 {
margin-top: 0;
font-size: 18px;
}
.navigation a {
display: block;
margin: 8px 0;
color: #2563eb;
text-decoration: none;
}
.navigation a:hover {
text-decoration: underline;
}
article {
padding: 28px;
border-radius: 12px;
background: white;
}
article h1 {
margin-top: 0;
}
article h2 {
margin-top: 48px;
padding-top: 12px;
border-top: 1px solid #e5e7eb;
}
@media (max-width: 700px) {
.layout {
grid-template-columns: 1fr;
}
.navigation {
position: sticky;
top: 0;
z-index: 1;
}
}
</style>
</head>
<body>
<header>
<h1>Документація про CSS</h1>
</header>
<main class="layout">
<nav class="navigation" aria-label="Навігація документацією">
<h2>Розділи</h2>
<a href="#selectors">Селектори</a>
<a href="#box-model">Блокова модель</a>
<a href="#positioning">Позиціонування</a>
<a href="#flexbox">Flexbox</a>
</nav>
<article>
<h1>Основи CSS</h1>
<p>
Цей матеріал містить кілька розділів. Під час прокручування
навігація залишається доступною, але не виходить за межі статті.
</p>
<h2 id="selectors">Селектори</h2>
<p>
Селектори визначають, до яких HTML-елементів застосовуються стилі.
Можна вибирати елементи за назвою, класом, ідентифікатором або
іншими ознаками.
</p>
<p>
Класи зручно використовувати для повторного застосування однакових
стилів до різних елементів.
</p>
<h2 id="box-model">Блокова модель</h2>
<p>
Кожен елемент у CSS можна розглядати як прямокутну область,
що складається з вмісту, внутрішнього відступу, межі та зовнішнього
відступу.
</p>
<p>
Властивість box-sizing допомагає контролювати спосіб обчислення
ширини та висоти елемента.
</p>
<h2 id="positioning">Позиціонування</h2>
<p>
CSS підтримує різні способи позиціонування елементів. Значення
sticky корисне для заголовків таблиць, панелей навігації та
інструментів, які мають залишатися доступними під час прокручування.
</p>
<p>
Sticky-елемент спочатку поводиться як звичайний елемент, а після
досягнення заданої межі тимчасово прилипає до неї.
</p>
<h2 id="flexbox">Flexbox</h2>
<p>
Flexbox призначений для розташування елементів в одному напрямку:
горизонтально або вертикально. Він спрощує вирівнювання та
розподіл вільного простору.
</p>
<p>
Після завершення цього розділу стаття закінчується. Тому sticky-панель
також завершить свій рух на нижній межі контейнера layout.
</p>
</article>
</main>
</body>
</html>У прикладі:
.navigation {
position: sticky;
top: 20px;
}Панель:
спочатку розташована у першій колонці;
прокручується разом зі сторінкою;
зупиняється на відстані 20px від верхньої межі вікна;
припиняє рух, коли батьківський .layout досягає своєї нижньої межі.
Sticky працює не лише під час прокручування всієї сторінки. Елемент може бути частиною окремого контейнера з власною прокруткою.
<div class="panel">
<h2 class="panel-title">Заголовок панелі</h2>
<p>Перший блок тексту.</p>
<p>Другий блок тексту.</p>
<p>Третій блок тексту.</p>
<p>Четвертий блок тексту.</p>
<p>П'ятий блок тексту.</p>
</div>.panel {
width: 320px;
height: 240px;
overflow-y: auto;
border: 1px solid #cbd5e1;
}
.panel-title {
position: sticky;
top: 0;
margin: 0;
padding: 12px;
background: white;
border-bottom: 1px solid #cbd5e1;
}У цьому випадку .panel-title прилипає до верхньої межі .panel, а не до верхньої межі вікна браузера.
Властивість overflow-y: auto створює область із власною прокруткою. Користувач може прокручувати вміст панелі, а її заголовок залишатиметься видимим.
z-indexSticky-елемент може перекривати текст під час прокручування. Тому для заголовків зазвичай задають фон:
.title {
position: sticky;
top: 0;
background: white;
}Якщо інші елементи перекривають sticky-елемент, можна додати z-index:
.title {
position: sticky;
top: 0;
z-index: 10;
background: white;
}z-index працює коректно, коли елемент має позиціонування, зокрема sticky.
Якщо сторінка вже має шапку, яка займає верхню частину екрана, sticky-елемент не повинен ховатися під нею.
.site-header {
position: fixed;
top: 0;
width: 100%;
height: 64px;
}
.sidebar {
position: sticky;
top: 80px;
}У цьому прикладі top: 80px враховує висоту шапки та додатковий відступ.
Щоб sticky-елемент був помітним під час прокручування, перевірте:
задано position: sticky;
задано хоча б одну межу, наприклад top;
батьківський контейнер має достатню висоту;
у контейнері є що прокручувати;
sticky-елемент не має вищого за контейнер елемента, який обмежує його висоту;
батьківські елементи не створюють несподівану область прокручування через overflow.
Sticky-елемент не може прилипнути надовше, ніж дозволяє його батьківський контейнер.
top, bottom, left або right.sidebar {
position: sticky;
}Без межі браузер не знає, у якій позиції потрібно зупинити елемент.
Виправлення:
.sidebar {
position: sticky;
top: 16px;
}Якщо батьківський елемент має висоту, приблизно рівну висоті sticky-елемента, прокручування буде непомітним.
Потрібно, щоб у контейнері був додатковий вміст і достатньо вільного простору для переміщення.
overflow змінює область прокручуванняБатьківський елемент із overflow: hidden, overflow: auto або overflow: scroll може стати найближчим контейнером прокручування. У такому випадку sticky-елемент прилипатиме до цього контейнера, а не до вікна браузера.
Наприклад:
.wrapper {
overflow: hidden;
}Якщо це не було заплановано, перевірте overflow у всіх батьківських елементів.
Прозорий фон може створити враження, що елемент працює неправильно: текст під ним буде видно крізь панель.
Виправлення:
.navigation {
background: white;
z-index: 1;
}height: 100% без визначеної висоти батьківського елементаВідсоткова висота залежить від висоти батьківського елемента. Якщо висота не визначена, результат може відрізнятися від очікуваного. Для прокручуваних панелей краще явно визначити висоту або максимальну висоту контейнера.
position: sticky поєднує звичайне та фіксоване позиціонування.
Елемент прилипає після досягнення межі, заданої через top, bottom, left або right.
Sticky-елемент залишається в межах свого контейнера.
Для прокручуваного контейнера можна використати overflow: auto або overflow-y: auto.
Фон і z-index допомагають уникнути перекривання вмісту.
Якщо sticky не працює, насамперед перевірте задану межу, висоту контейнера та властивості overflow у батьківських елементів.