Что такое липкое меню и как его реализовать

Под липким меню обычно понимают навигационную панель, которая остаётся доступной при вертикальной прокрутке страницы. Её также называют закреплённой шапкой: логотип и ссылки на основные разделы сохраняются на экране, когда текст и изображения уходят вверх. Такое решение сокращает путь к важным разделам и помогает ориентироваться на длинных страницах.

Не каждому экрану нужна постоянная навигация. Сначала определите её роль: обозначить сайт, обеспечить переходы между разделами или удерживать важное действие. Если проект пока остаётся временной визиткой, сценарии использования домена помогают определить, какие задачи можно решить уже на старте.

Что относится к закреплённой навигации

Липкая шапка отличается от обычной тем, что меняет положение относительно окна, сохраняя привычный порядок элементов в разметке. Пользователь видит логотип, ссылку на главную и несколько ключевых разделов независимо от текущей позиции страницы. Это особенно полезно на длинных текстах, каталогах и страницах с последовательными шагами.

Существуют два основных механизма. CSS-свойство position: sticky привязывает элемент к верхней границе контейнера, пока тот прокручивается. Вариант с position: fixed всегда располагает панель поверх содержимого и требует отдельного отступа, иначе она перекроет верхнюю часть материала.

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

Главный критерий такого решения — постоянная доступность важных переходов. Если панель закрывает текст, мешает открыть меню или отвлекает от содержания, от неё стоит отказаться. Закрепление должно поддерживать структуру страницы, а не превращать экран в набор перекрывающихся элементов.

Разметка и базовые стили

Сначала создайте семантическую основу: элемент header, ссылку на логотип и nav с понятным названием для вспомогательных технологий. Не стоит собирать меню из безымянных кнопок или вставлять готовый блок без проверки его структуры.

<a class="skip-link" href="#main">Перейти к содержимому</a>

<header class="site-header">
  <a class="site-logo" href="/">Логотип</a>

  <button class="menu-toggle" type="button"
          aria-expanded="false"
          aria-controls="main-navigation">
    Меню
  </button>

  <nav id="main-navigation" class="site-nav"
       aria-label="Основная навигация">
    <a href="#catalog">Каталог</a>
    <a href="#about">О проекте</a>
    <a href="#contacts">Контакты</a>
  </nav>
</header>

<main id="main">
  <!-- Содержимое страницы -->
</main>

Оформите панель через классы, чтобы отделить её от содержимого страницы. Для базовой вертикальной навигации достаточно flex-контейнера, однотонного фона и видимой нижней границы. Значение z-index помогает разместить шапку выше карточек и всплывающих элементов.

html {
  scroll-padding-top: 5rem;
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1100;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding: 0 1rem;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.site-nav {
  display: flex;
  gap: 1.25rem;
}

.menu-toggle {
  display: none;
}

@media (max-width: 640px) {
  .menu-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
  }

  .site-nav.is-open {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    padding-bottom: 1rem;
  }
}

Закрепление через CSS работает при отсутствии у родителей ограничений вроде overflow: hidden или overflow: auto. Если полоса перестаёт удерживаться, проверьте структуру контейнеров: свойство не должно «застревать» внутри небольшого блока, который быстро заканчивается. На узких экранах высоту шапки уменьшают, а набор ссылок переносят в раскрывающееся меню.

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

Поведение при прокрутке и переходы

Чистый CSS-вариант обычно не требует скриптов: браузер сам удерживает панель у верхней границы. Дополнительное поведение можно добавить скриптом: панель меняет фон после выхода на первый экран, скрывается при движении вниз и возвращается при движении вверх. Такой эффект должен сохранять доступ к пунктам для клавиатуры и сенсорного управления.

На мобильных экранах кнопка раскрытия меняет класс у навигации и значение aria-expanded. Логика должна учитывать повторные нажатия и закрытие по Escape; в полной реализации также управляют фокусом и блокировкой прокрутки подложки.

const menuButton = document.querySelector('.menu-toggle');
const navigation = document.querySelector('#main-navigation');

menuButton.addEventListener('click', () => {
  const isOpen = menuButton.getAttribute('aria-expanded') === 'true';

  menuButton.setAttribute('aria-expanded', String(!isOpen));
  navigation.classList.toggle('is-open', !isOpen);
});

Для переходов к якорям заранее задайте scroll-padding-top у корневого элемента. Тогда заголовок раздела не окажется под закреплённой шапкой. Плавную прокрутку отключают для пользователей, выбравших уменьшение движения в настройках системы.

Если выбран вариант с position: fixed, зарезервируйте под панель место в потоке документа. Иначе первый абзац или заголовок начнёт скрываться под ней. Стиль sticky такого отступа не требует, поскольку шапка сохраняет исходное место в разметке.

Мобильный формат и доступность

На телефоне закреплённая панель занимает ценную высоту экрана. Обычно оставляют логотип, кнопку раскрытия и одну важную ссылку, а остальные разделы переносят в выдвижную панель. Полезно сопоставить собственное решение с примерами запоминающихся сайтов, оценив не только визуальную заметность, но и удобство чтения.

У кнопки раскрытия должны быть атрибуты aria-expanded и aria-controls, а меню — уникальный идентификатор и понятное название. В модальном варианте уместно использовать элемент dialog: браузер помогает управлять фокусом и закрытием по Escape. Обычную выдвижную панель закрывают кнопкой, нажатием вне меню или клавишей Escape.

Пункты меню должны иметь достаточный размер для нажатия, читаемый контраст и заметное состояние фокуса. Не полагайтесь только на иконку без подписи: понятное название помогает при озвучивании страницы. Ссылка для перехода к основному содержимому позволяет пропустить повторяющуюся навигацию с клавиатуры.

Анимацию появления делайте короткой и отключайте через @media (prefers-reduced-motion: reduce). Это касается не только плавной прокрутки, но и сдвига панели. Движение не должно мешать чтению или переходу к следующему разделу.

Проверка перед публикацией

Частая ошибка — считать, что position: sticky гарантированно работает везде. Поведение стоит проверить в актуальных версиях Chrome, Firefox, Safari и Safari на iOS, а также при увеличении страницы до 200%. Особое внимание требуется к горизонтальной прокрутке, длинным заголовкам и клавиатурной навигации.

Проверяйте не только внешний вид, но и пользовательские сценарии. Человек должен видеть все пункты, доходить до них клавишей Tab, активировать их кнопкой Enter, возвращаться по Shift + Tab и находить выбранный раздел после перехода. Отдельно оцените положение фокуса, перекрытие текста и отсутствие неожиданных скачков при смене ориентации экрана.

После проверки убедитесь, что скрипты не пересчитывают положение панели на каждом событии прокрутки без необходимости. Если эффект достигается средствами CSS, это снижает нагрузку и упрощает поддержку. Отдельно оцените поведение при быстром переключении между вкладками и при возврате на страницу из истории браузера.

Для первого запуска откройте главную страницу сайта, проверьте её на телефоне и выберите набор основных ссылок для закреплённой шапки. Затем перенесите выбранную структуру в разметку, добавьте стили закрепления и проверьте переходы по разделам, прокрутку, увеличение до 200% и закрытие мобильного меню. Готовый результат должен сохранять порядок элементов, оставлять фокус видимым и помогать посетителю вернуться к навигации с любого места страницы.