Шапка, которая остаётся на экране при прокрутке, кажется удобной по умолчанию — но на мобильных устройствах она же съедает и без того тесное пространство экрана. Разбираем, чем sticky header отличается от обычной шапки, когда он действительно помогает, а когда только мешает читать контент.
Что такое sticky header
Sticky header — это шапка сайта, которая остаётся зафиксированной вверху экрана при прокрутке страницы вниз, вместо того чтобы уходить за пределы видимой области вместе с остальным контентом. Технически это делается через CSS-свойство position: sticky (реже — через JavaScript для более сложного поведения, например скрытия шапки при прокрутке вниз и появления при прокрутке вверх).
Плюсы фиксированной шапки
- Меню и CTA-кнопка всегда доступны — не нужно прокручивать страницу обратно наверх, чтобы перейти в другой раздел или оставить заявку.
- Логотип и точка возврата на главную видны в любой момент — упрощает ориентацию на длинных страницах.
- На страницах с длинным контентом (каталоги, лендинги с множеством блоков) заметно повышает удобство навигации.
- Кнопка действия остаётся на виду, даже если посетитель долистал до середины страницы, — больше возможностей конвертировать интерес в заявку.
Минусы и риски sticky-шапки
- Занимает часть экрана постоянно — особенно заметно на мобильных устройствах, где вертикального пространства и так немного.
- При неаккуратной реализации может перекрывать контент: заголовки или кнопки уходят под шапку при переходе по внутренним ссылкам страницы.
- Дополнительная тень или граница шапки, если не проработана, визуально «режет» страницу на прокрутке.
- На слабых устройствах анимация появления/скрытия шапки может подтормаживать, если реализована через тяжёлый JavaScript вместо CSS.
Когда sticky header точно нужен
Фиксированная шапка оправдана на длинных страницах: каталогах товаров, лендингах с множеством смысловых блоков, статьях и документации, где пользователь может провести на странице не одну минуту. Здесь польза от постоянного доступа к навигации и CTA перевешивает занятое пространство экрана.
Когда лучше обойтись обычной шапкой
На коротких страницах — с одним-двумя экранами контента — sticky-поведение почти не даёт выгоды: пользователь и так быстро долистывает до футера, а фиксированная шапка только отъедает место. То же касается страниц, где контент важнее навигации: например, детальные фото товара или полноэкранные визуальные истории — здесь шапка скорее отвлекает от главного.
Особенности реализации на мобильных устройствах
На телефоне обычная sticky-шапка полной высоты может занимать 15–20% экрана — это ощутимо, особенно на страницах с длинным списком товаров или статьёй. Поэтому на мобильных чаще применяют более гибкие сценарии:
- Уменьшение высоты при прокрутке — логотип и меню сжимаются в компактную полосу вместо полноразмерной шапки.
- Скрытие при прокрутке вниз, появление при прокрутке вверх — шапка не занимает место, пока пользователь читает контент, но мгновенно доступна, стоит прокрутить обратно.
- Только иконка меню и CTA вместо полного набора элементов — второстепенные элементы вроде поиска или личного кабинета временно прячутся, оставляя главное.
Как это реализуется технически
Базовое sticky-поведение — это position: sticky на уровне CSS, без JavaScript: работает быстро и предсказуемо, но не умеет сама скрываться и показываться в зависимости от направления прокрутки. Более сложные сценарии — сжатие шапки, скрытие при прокрутке вниз — требуют JavaScript, который слушает события прокрутки. Здесь важно не тормозить страницу: обработчик скролла должен быть оптимизирован (throttling/debounce), иначе на слабых мобильных устройствах шапка будет дёргаться и подвисать вместо плавной анимации. Если не уверены, нужна ли вашему сайту фиксированная шапка или текущая реализация работает некорректно на мобильных, — это как раз то, что мы разбираем в рамках доработки и редизайна шапки сайта.
Частые вопросы
Замедляет ли sticky header загрузку сайта?
Сама фиксация через CSS position: sticky не влияет на скорость. Замедление возможно только при неоптимизированном JavaScript-сценарии — например, тяжёлых обработчиках событий прокрутки без ограничения частоты вызова.
Можно ли сделать sticky-шапку только на мобильной версии?
Да, поведение шапки можно настроить независимо для десктопа и мобильных устройств — например, обычную шапку на десктопе и компактную sticky-версию с сокращённым набором элементов на телефоне.
Как понять, что sticky header реализован неаккуратно?
Частый признак — контент «прыгает» или уходит под шапку при переходе по внутренним ссылкам-якорям на странице, либо сама шапка подёргивается при прокрутке на телефоне.
Sticky header — это инструмент, а не обязательный стандарт. На длинной странице он экономит пользователю время, на короткой — просто отнимает место на экране.
