Как сделать закреплённую шапку сайта на CSS и не закрыть контент

Закреплённая шапка остаётся у края окна при прокрутке. Настройте sticky, учтите высоту блока и проверьте якоря, фокус и узкий экран после правок.

Что должно получиться

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

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

Инструкция описывает реализацию через CSS position: sticky. Работайте с копией шаблона или тестовой страницей. До изменения сохраните текущие стили и убедитесь, что знаете, какой файл действительно подключён к странице.

Из чего это складывается

Sticky сохраняет исходное место элемента в обычном потоке страницы, а затем ограничивает его положение при прокрутке. Fixed выводит элемент из обычного потока; для него часто приходится отдельно учитывать занятое место. Эти варианты нельзя менять друг на друга, не проверив поведение всей страницы.

Как это сделать по шагам

1. Выберите закрепляемую часть. Решите, нужна ли вся шапка или только компактная навигация. Проверьте высоту на широком и узком экранах, с длинными подписями и увеличенным текстом.
2. Посмотрите структуру родителей. Найдите блоки, которые окружают панель, и их правила overflow. Определите, прокручивается вся страница или отдельная область.
3. Добавьте sticky и границу. Укажите position: sticky и подходящее top. При отсутствии других верхних панелей для первого опыта можно начать с top: 0.
4. Проверьте фон и слои. Сделайте содержимое шапки читаемым поверх страницы. Выберите порядок слоёв по существующей системе проекта, затем проверьте раскрытое меню и диалоги.
5. Учтите перекрытую область при прокрутке. Настройте отступ с учётом фактической высоты панели. Проверьте переход к якорю и программную прокрутку, если она используется.
6. Пройдите страницу с клавиатуры. Двигайтесь вперёд и назад по ссылкам и полям. Активный элемент должен быть виден, в том числе у верхнего края окна.
7. Проверьте телефон и низкое окно. Откройте меню, поверните устройство или уменьшите высоту окна. Если панель мешает работе, уменьшите её либо отключите закрепление в подходящих условиях.
8. Проверьте опубликованный шаблон. Откройте несколько типов страниц и убедитесь, что новые стили загрузились. Сохраните описание изменения и сценарии проверки для следующего обновления.

Минимальный пример CSS

Предположим, в вашем шаблоне именно закрепляемая панель имеет класс site-header. В копии страницы начальное правило может быть таким: .site-header { position: sticky; top: 0; background: #fff; z-index: 10; }.

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

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

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

Почему sticky не работает

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

Затем посмотрите на родителей. Sticky ориентируется на ближайшего предка с механизмом прокрутки, который может появляться из-за overflow: auto, scroll или hidden. Такой предок не всегда совпадает с той областью, которую вы фактически прокручиваете мышью. Поэтому панель может вести себя иначе, чем вы ожидаете от прокрутки всей страницы.

Не удаляйте overflow у всех блоков подряд. Оно могло ограничивать галерею, скрывать декоративный выход за границу или обеспечивать работу внутреннего списка. Найдите конкретного предка, объясните его назначение и проверьте результат изменения в копии.

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

В раскладке Flexbox или Grid блок может растягиваться так, что свободного пути для закрепления не остаётся. Сравните размеры элемента, родителя и области прокрутки. Меняйте выравнивание только после такого сравнения: случайная правка может нарушить соседние колонки.

Как оставить место для якорных переходов

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

Для основной прокрутки документа можно задать scroll-padding-top у корневого элемента. Учебный пример: html { scroll-padding-top: 5rem; }. Величина 5rem выбрана только для объяснения: используйте высоту своей закреплённой области и нужный небольшой зазор.

Если прокручивается отдельный контейнер, настройка должна относиться к нему. Для отдельных целей перехода есть scroll-margin-top, которое задают самим целевым элементам. Это разные места настройки; не дублируйте полную компенсацию автоматически в обоих свойствах, иначе расстояние может стать избыточным.

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

Фокус, меню и порядок слоёв

Перейдите по странице клавишами Tab и Shift+Tab. В обратном направлении элемент у верхнего края особенно легко оказывается под закреплённой областью. Проверьте видимость рамки фокуса, самого элемента и его подписи.

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

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

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

Что проверить на телефоне

На широком экране панель может занимать одну строку, а на узком — несколько. Откройте самые длинные подписи и состояние после входа в аккаунт, если оно отличается. Не считайте высоту, измеренную на одном снимке, постоянной для всех посетителей.

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

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

Частые ошибки

• Добавить только sticky. Без заданной границы ожидаемое поведение может не появиться.
• Пропустить родительскую прокрутку. Панель привязывается к неочевидному контейнеру, и изменение top не решает причину.
• Спрятать текст под панелью. Проверяйте якоря и фокус, а не только обычную прокрутку мышью.
• Подобрать один огромный z-index. Это затрудняет управление остальными слоями и не всегда преодолевает границы контекстов.
• Закрепить всю высокую шапку на телефоне. Оставшегося места может не хватать для чтения и работы с формой.

Как проверить

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

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

Вопросы и ответы

Sticky всегда привязывается к окну браузера?

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

Почему панель останавливается раньше конца страницы?

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

Нужно ли добавлять отступ над всей страницей?

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

Как выбрать значение top?

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

Почему большой z-index не помогает?

Элемент может находиться внутри отдельного контекста наложения, который целиком расположен ниже другой группы. Проверьте структуру слоёв. Увеличение числа у вложенного элемента не всегда меняет положение его родительской группы.

Можно отключить закрепление на маленьком экране?

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

Достаточно проверить только главную страницу?

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