У навчальній сторінці довга стаття розташована праворуч, а навігація по розділах — ліворуч. До навігації додали position: sticky, але під час прокрутки вона все одно зникає. Або працює лише в короткому фрагменті сторінки. CSS sticky залежить не тільки від самого елемента: важливі відступ, контейнер прокрутки та простір, у якому блок може рухатися.
Розглянемо діагностику на локальному прикладі без JavaScript і сторонніх бібліотек. Це умовна вправа, а не опис ремонту клієнтського сайту. Потрібні редактор HTML/CSS і браузер; адміністративні права та встановлення пакетів не потрібні. Перед змінами робочої теми збережіть її попередню версію й повторіть проблему на тестовій копії, щоб випадково не змінити інші блоки.
Перевірте умови, а не збільшуйте z-index
Спочатку відкрийте інструменти розробника й виберіть саме навігацію. У вкладці обчислених стилів перевірте position і top: правило може бути перекрите іншим селектором або медіазапитом. Для вертикального прилипання потрібен відповідний відступ, відмінний від auto. Якщо sticky задано, але обидва вертикальні відступи залишаються автоматичними, очікуваного утримання під час прокрутки не буде.
Значення z-index впливає на порядок накладання, а не створює простір для руху. Тому велике число не виправить занадто короткий батьківський блок. Спочатку визначте, чи елемент узагалі переходить у стан утримання; лише після цього досліджуйте перекриття іншими шарами. Відокремлюйте дві проблеми: блок рухається не так, як очікується, і блок рухається правильно, але його не видно.
За описом MDN, sticky орієнтується на найближчого предка з механізмом прокрутки та обмежується своїм контейнером. Це відрізняється від очікування «назавжди прикріпити блок до екрана». Коли закінчується область батьківського контейнера, навігація також повинна залишити цю область. Така поведінка може бути правильною, навіть якщо спочатку здається несправністю.
Відтворіть поведінку в простій розмітці
Створіть новий файл sticky-demo.html у тестовому каталозі й додайте звичайний HTML-документ. Усередину body вставте наведену структуру. Класи умовні: замінюйте їх узгоджено в розмітці та стилях. У правий article додайте достатньо навчальних абзаців, щоб сторінку справді можна було прокручувати. Один короткий рядок не створить потрібного сценарію перевірки; не вимірюйте роботу sticky на непрокручуваній сторінці.
<div class="sticky-demo">
<aside class="sticky-demo__nav">Navigation</aside>
<article class="sticky-demo__body">
<p>Add enough learning paragraphs here.</p>
</article>
</div>Стилі додайте в окремий тестовий CSS-файл, підключений до документа, або в його style всередині head. Параметри колонок і відступу нижче призначені лише для вправи, а не для вашого продуктивного макета. align-self: start не дає навігації розтягнутися на всю висоту рядка сітки. Залишайте батьківський контейнер вищим за саму навігацію, інакше місця для помітного руху може не залишитися.
.sticky-demo {
display: grid;
grid-template-columns: 12rem minmax(0, 1fr);
gap: 24px;
}
.sticky-demo__nav {
position: sticky;
top: 16px;
align-self: start;
}
.sticky-demo__body { min-width: 0; }Прокрутіть сторінку від початку до кінця статті. Очікується, що навігація спершу рухається разом із документом, потім утримується з відступом 16 пікселів і не виходить за межі своєї області. Це очікування навчального прикладу, не результат тестування вашого сайту. Якщо над нею є фіксований хедер, оберіть відступ з урахуванням його фактичної висоти, а не копіюйте число навмання.
Знайдіть предка, який перехоплює прокрутку
Якщо простий приклад працює, а компонент теми — ні, перегляньте предків проблемного елемента. Звертайте увагу на overflow: auto, scroll або hidden. Навіть overflow: hidden може створювати механізм прокрутки, з яким пов’язується sticky, хоча користувач прокручує іншу область. Перевіряйте обчислені значення обох осей, а не тільки один рядок у вихідному CSS.
Тимчасово вимикайте підозріле правило в інструментах розробника по одному й повторюйте ту саму прокрутку. Така локальна зміна не зберігається у файлах після перезавантаження. Якщо поведінка змінилася, це корисна підказка, але ще не дозвіл видаляти overflow у всій темі. Правило може обмежувати зображення, анімацію або інший компонент, який потребує окремого рішення.
Перевірте також висоту самої навігації. Якщо вона вища за доступну область екрана, утримання може робити частину пунктів незручною для доступу. Не приховуйте їх заради красивого ефекту. Можливо, на вузькому або низькому екрані краще залишити звичайне розташування, скоротити навігацію за змістом або погодити іншу взаємодію. Рішення має зберігати доступність, а не лише прибирати видиму проблему.
Завершіть перевірку на різних розмірах
Для вправи можна вимкнути прилипання на вузькому екрані й розмістити блоки послідовно. Поріг нижче — навчальний приклад; у реальному проєкті вибирайте його за тим, де вміст перестає вміщатися. Додайте правило після основних стилів, щоб порядок був зрозумілим. Це зміна поведінки макета, тому перевірте, що навігація залишається видимою та придатною для використання.
@media (max-width: 720px) {
.sticky-demo { display: block; }
.sticky-demo__nav { position: static; }
}Пройдіть початок статті, її середину та кінець на широкому й вузькому екрані. Змініть масштаб тексту й перевірте невисоке вікно, де меню займає більшу частину доступного простору. Якщо в навігації є посилання, переходьте ними з клавіатури та переконайтеся, що фокус не перекритий. Відсутність горизонтальної смуги прокрутки сама по собі не доводить зручність усіх сценаріїв.
Зафіксуйте, який предок впливав на поведінку й яке правило змінили. Перед перенесенням у тему перевірте Git-коміт та сусідні компоненти, які використовують той самий контейнер. Для відкату поверніть конкретну попередню зміну, а не вимикайте всі стилі позиціювання. Збережіть сценарій прокрутки як регресійну перевірку після наступного оновлення макета.
Висновок: sticky працює передбачувано, коли узгоджені відступ, висота елемента та межі контейнера. Діагностика від простого прикладу до конкретного предка корисніша за випадкові зміни z-index. Якщо компонент поводиться по-різному в темі й окремій сторінці, AriZone може допомогти знайти залежність і перевірити точкове виправлення на тестовій версії.
Залиште коментар