Прилипающий заголовок на CSS

Кратко: Прилипающий (sticky) заголовок остаётся видимым при прокрутке, улучшая навигацию и узнаваемость бренда. В статье показано HTML/CSS-решение, варианты обхода ограничений и рекомендации по доступности.

Векторная иллюстрация слоёв веб-страниц с верхним слоем, содержащим макет (wireframe)

Что такое прилипающий заголовок

Прилипающий заголовок (sticky header) — это элемент интерфейса, который остаётся в фиксированной позиции окна просмотра при прокрутке страницы. В CSS это обычно достигается с помощью свойства position: sticky; — оно работает как сочетание относительного и фиксированного позиционирования: до определённого порога элемент ведёт себя как обычный, затем «прилипает» к указанной позиции.

Коротко о пользе:

Быстрый доступ к основным ссылкам навигации.
Постоянная видимость логотипа или имени бренда.
Возможность убрать боковую навигацию и выделить больше пространства для контента.

Важно: прилипающий заголовок удобен, но при неправильной реализации может перекрывать контент или ухудшать доступность.

HTML: структура заголовка

Ниже — минимальная структура HTML для прилипающего заголовка. Она содержит логотип, навигацию и несколько секций-обозначений страницы.


  
    Company Logo 🏠
    
      
        Home
        About
        Services
        Contact
      
    
  

  Home page
  About
  Services
  Contact

Примечание: структура семантически корректна — используйте теги header, nav, main и section для лучшей доступности и SEO.

Макет прилипающего заголовка без стилей

Базовые стили CSS

Пример базового CSS, который создаёт внешний вид и задаёт высоту секций для демонстрации прокрутки.

@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;
}

Страница после применения стилей с разноцветными секциями

Внедрение эффекта прилипания

Чтобы заголовок оставался видимым при прокрутке, примените position: sticky и задайте позицию, например top: 0. Это укажет, где он должен «прилипнуть». Пример:

header {
  justify-content: space-between;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
}

После этого заголовок будет оставаться у верхней границы окна просмотра при прокрутке вниз.

Наложение других элементов

Если другие блоки перекрывают заголовок, добавьте z-index, чтобы поднять его в стек контекста:

header {
  justify-content: space-between;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 9999;
}

Плавная прокрутка

Для более приятного перехода между якорями добавьте scroll-behavior:

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

Доступность и UX (важно)

Убедитесь, что размеры клавиш навигации достаточны для сенсорных экранов (рекомендуется минимум ~44×44 CSS-пикселя).
Проверяйте контраст текста заголовка и фона (соответствие WCAG AA/AAA).
Не перекрывайте контент без явного визуального отступа: если заголовок фиксирован, добавьте верхний отступ (padding-top) для основного контента равный высоте заголовка.

Пример корректного отступа:

main, section {
  padding-top: 6rem; /* если header ~6rem высотой */
}

Когда sticky может не подойти (контрпримеры)

Многоуровневая навигация с большими выпадающими меню: закреплённый заголовок займёт слишком много места.
Мобильные экраны с ограниченным пространством: если заголовок высокий, он уменьшает доступную область контента.
Сложные макеты с трансформациями родительских элементов: position: sticky не работает, если один из предков имеет overflow: hidden/auto/scroll или трансформации — это ограничение спецификации.

Альтернативные подходы

Фиксация через position: fixed + JS для добавления/удаления класса при прокрутке (подходит, когда нужно анимированное появление).
Использовать «компактный» вариант заголовка: при прокрутке уменьшать высоту/скрывать элементы. Реализуется через CSS-переходы и JS.
Off-canvas навигация для мобильных: вместо фиксированного верхнего меню использовать выдвижную панель.

Мини-методология: шаги внедрения

Проектирование: определите высоту и элементы заголовка (логотип, важные ссылки, поиск).
Верстка: добавьте семантическую структуру (header > nav > ul > li).
Базовый стиль: задайте размеры, отступы, цвета.
Sticky: примените position: sticky и top.
Тесты: проверьте на разных браузерах, на мобильных и с ассистивными технологиями.
Улучшения: добавьте z-index, плавность, адаптивное поведение.

Критерии приёмки

Заголовок остаётся видимым при прокрутке вниз.
Заголовок не перекрывает важный контент: основной контент имеет отступ сверху, равный высоте заголовка.
Навигация доступна и кликабельна на мобильных устройствах.
Контраст текста соответствует требованиям доступности.
Работа в основных браузерах (Chrome, Firefox, Safari, Edge) без разрушения макета.

Шпаргалка CSS — быстрые приёмы

position: sticky; top: 0; — базовый набор для прилипающего поведения.
z-index: 9999; — удерживает заголовок поверх других элементов.
Добавьте padding-top к main/section = высоте header, чтобы контент не скрывался.
Если parent имеет overflow: hidden/auto/scroll или transform — sticky может не работать.

Таблица совместимости и особенности

Поддержка в современных браузерах хорошая, но старые версии IE не поддерживают position: sticky.
На iOS Safari реальные проблемы встречаются редко, но стоит тестировать на реальных устройствах.
Если поведение непредсказуемо, проверьте на наличие overflow/transform у предков.

Короткий итог

Прилипающий заголовок — простой и эффективный приём для улучшения навигации. CSS-решение с position: sticky работает во многих случаях, но требует внимания к доступности, перекрытиям и особенностям предков в DOM. Если необходима дополнительная логика (анимации, компактное поведение), комбинируйте CSS с лёгким JavaScript.

Важно: перед внедрением протестируйте поведение на мобильных устройствах и в ассистивных технологиях.