Липкий хедер на CSS: простое руководство
TL;DR
Липкий хедер (sticky header) остаётся видимым при прокрутке и улучшает навигацию и узнаваемость бренда. Это достигается с помощью CSS (в первую очередь position: sticky), плюс нужно учесть z-index, наследование overflow и доступность.
В веб‑дизайне липкий хедер — это эффективный инструмент для улучшения опыта пользователя и навигации. При прокрутке страницы он остаётся видимым, поэтому важные ссылки навигации всегда под рукой. Ниже — подробное объяснение и практические рекомендации по созданию липкого хедера на CSS.
Что такое липкий хедер
Липкий хедер остаётся на месте на странице, даже когда пользователь прокручивает вниз. Для этого используется ряд CSS‑свойств, главным образом position: sticky. Благодаря этому:
- Пользователи получают быстрый доступ к основным ссылкам навигации.
- Логотип или название бренда остаются видимыми, что усиливает идентичность.
- Липкий хедер может сократить необходимость боковой навигации, оставляя больше места для контента.
Преимущества: улучшенная навигация и удобство использования.
Структура HTML
Ниже — базовая HTML‑структура хедера и разделов страницы. Код сохранён как в исходнике, чтобы при копировании всё работало корректно.
Company Logo 🏠
Home page
About
Services
Contact
Эта структура использует header с логотипом и элемент nav с неупорядоченным списком ссылок. Далее идут main и несколько section для разных частей страницы.
Базовые стили: CSS разметка и визуал
Ниже приведён CSS, который использует модель коробки, flexbox и задаёт высоту для плейсхолдеров разделов. Код оставлен без изменений, чтобы сохранить точность примера.
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body { font-family: "Quicksand", sans-serif; }
main,
section { height: 100vh; }
.logo { font-size: 3rem; }
main,
header,
section {
display: flex;
align-items: center;
}
main { justify-content: center; }
header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb;
}
nav ul {
display: flex;
column-gap: 2rem;
list-style: none;
}
a {
text-decoration: none;
font-size: 2rem;
color: #333;
}
section { justify-content: center; }
#home { background: #2c3e50; }
#about { background: #ccccff; }
#services { background: #f5b7b1; }
#contact { background: #40e0d0; }
h1 {
font-size: 4rem;
color: #fff;
}
После применения стилей макет станет более презентабельным и готовым к добавлению липкости.
Реализация эффекта липкости на CSS
Сейчас при прокрутке header уходит с экрана. Чтобы этого избежать, используйте position: sticky и задайте смещение через top. Это свойство сочетает в себе поведение relative и fixed в зависимости от положения прокрутки.
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}
Установка position: sticky фиксирует хедер в указанной позиции при достижении её прокруткой. Свойство top определяет расстояние от верхней границы окна, где хедер должен «прилипнуть».
Решение проблем со слоями и перекрытием
Иногда другие элементы могут перекрывать липкий хедер. Чтобы гарантировать, что хедер будет сверху, добавьте z-index:
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}
А для плавной прокрутки между разделами добавьте scroll-behavior в html:
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
Теперь страница прокручивается плавно, а хедер остаётся доступным.
Доступность и UX: что учитывать
- Обеспечьте достаточный контраст текста и фона хедера. Это улучшает читаемость для всех пользователей.
- Не делайте хедер слишком высоким — он съедает полезную площадь экрана, особенно на мобильных устройствах.
- Сохраните фокусируемость ссылок клавиатурой. Проверьте последовательность табуляции.
- Подумайте о кнопке «скрыть хедер» или автоматическом сворачивании на мобильных экранах для экономии места.
Когда липкий хедер не работает: распространённые причины
- Родительский элемент имеет overflow: hidden / auto. position: sticky действует внутри ближайшего прокручиваемого контейнера.
- На предке задан transform, filter или perspective. Эти свойства создают новый контекст, который ломает поведение sticky.
- Неправильно рассчитаны размеры: если у хедера нет места, он может «прыгать».
- Старые браузеры без поддержки position: sticky.
Важно тестировать в реальной вёрстке и на целевых устройствах.
Альтернативные подходы
- position: fixed — всегда фиксирует элемент, но он не учитывает свой контейнер и может перекрывать контент.
- JavaScript + IntersectionObserver — даёт больше контроля (например, анимации при смене состояния), но усложняет реализацию и увеличивает нагрузку.
- CSS sticky для части навигации (например, только для панели табов), а не всего хедера.
Руководства для ролей: кто за что отвечает
- Дизайнер: определяет высоту хедера, порядок элементов и визуальную иерархию. Указывает размеры и запас по высоте для мобильных устройств.
- Фронтенд‑разработчик: реализует HTML/CSS, проверяет z-index и взаимодействие с другими контейнерами, добавляет фоллбэки.
- QA: проверяет поведение при прокрутке, на разных браузерах и устройствах, тестирует клавиатурную навигацию и контраст.
Критерии приёмки
- Хедер остаётся на вершине страницы при прокрутке вниз и не перекрывается контентом.
- Ссылки в хедере доступны с клавиатуры, и фокус видим.
- Высота хедера не превышает согласованную макетом величину на мобильных экранах.
- Плавная прокрутка между секциями работает корректно.
- Отсутствуют баги при наличии transform или overflow в родителях.
Короткий глоссарий
- position: sticky — CSS‑позиционирование, которое «прилипает» при достижении заданного смещения.
- top — смещение от верхнего края окна при прилипании.
- z-index — порядок наложения элементов по оси Z.
Совместимость и подводные камни
- position: sticky поддерживается в современных браузерах, но стоит проверить поддержку в целевых версиях IE (IE не поддерживает).
- Наличие overflow у предка и transform могут нарушить работу. Решение: переносить область прокрутки на document или устранять transform.
Быстрый чек‑лист (шпаргалка)
- header { position: sticky; top: 0 } добавлен.
- z-index проверен и не конфликтует.
- Нет overflow/transform у предков.
- Контент под хедером не скрывается; учтены отступы.
- Клавиатурная навигация работает.
Итог
Липкий хедер — простой и мощный приём в веб‑дизайне. Он улучшает навигацию и повышает удобство использования. Часто достаточно нескольких строк CSS. При этом важно учитывать совместимость, контекст вёрстки (overflow/transform) и требования доступности. Тестируйте на целевых устройствах и учитывайте UX‑решения для мобильных экранов.
Короткая сводка:
- Используйте position: sticky и top для базовой реализации.
- Контролируйте z-index и родительские стили.
- Проверяйте доступность и поведение в разных браузерах.
