Почему прилипающая шапка — это не просто position: sticky
Слушай, прилипающая шапка (она же sticky header) — это база современного веба. Но почему-то до сих пор каждый второй проект страдает от того, что шапка либо перекрывает контент, либо «лагает» при скролле, либо ломает доступность. Мы все хотим, чтобы меню было под рукой, но не хотим платить за это дерганой версткой. Давай разберем, как сделать это по-взрослому, чтобы код не вонял нафталином и работал как швейцарские часы.
Как мы страдали раньше
Вспомни те славные (нет) времена, когда единственным выходом был position: fixed. Это было суровое решение: как только ты вешал этот класс, элемент вылетал из нормального потока документа. И тут начинались костыли. Тебе нужно было вручную добавлять padding-top к тегу body, равному высоте шапки, чтобы первый блок контента не залез под нее. А если шапка адаптивная и меняет высоту на мобилках? Приходилось вешать тяжелые слушатели скролла на JavaScript, вычислять высоту через getBoundingClientRect и динамически менять отступы. Это было медленно, неудобно и вызывало кучу лишних перерисовок (reflow).
Как делать правильно в 2026 году
Сегодня position: sticky — это золотой стандарт. Главная фишка в том, что элемент ведет себя как обычный relative, пока не достигнет указанного порога, и только потом фиксируется. Это сохраняет его место в потоке и избавляет нас от возни с компенсацией отступов. Но современная шапка — это не только позиционирование. Чтобы она смотрелась дорого, сегодня часто используют эффект матового стекла (Glassmorphism) через backdrop-filter. Это позволяет контенту мягко просвечивать под шапкой, создавая ощущение глубины и премиальности.
И еще один важный момент: если у тебя на странице есть якорные ссылки, шапка обязательно перекроет заголовок, к которому перешел пользователь. Чтобы этого не случилось, используй свойство scroll-padding-top для элемента html. И не забывай про навигацию с клавиатуры — проверь, как выглядят ссылки при фокусе, используя псевдокласс :focus-visible, чтобы сохранить доступность интерфейса без лишних синих рамок там, где они не нужны.
Готовый сниппет кода
/* Настраиваем отступ для якорных ссылок, чтобы шапка их не закрывала */
html {
scroll-behavior: smooth;
scroll-padding-top: 70px; /* Высота шапки + небольшой запас */
}
.header {
/* Основная магия */
position: sticky;
top: 0;
z-index: 1000;
/* Оформление */
height: 70px;
display: flex;
align-items: center;
padding: 0 5%;
/* Эффект стекла */
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px) saturate(180%);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
/* Стили для ссылок внутри */
.header a {
text-decoration: none;
color: #333;
margin-right: 20px;
}
/* Улучшаем фокус для доступности */
.header a:focus-visible {
outline: 2px solid #007bff;
outline-offset: 4px;
border-radius: 4px;
}
Частая ошибка новичков
Самый частый вопрос в личку: «Почему мой sticky не работает?». Ответ в 99% случаев один: у одного из родительских контейнеров прописано свойство overflow: hidden (или auto, scroll). Свойство sticky работает только внутри своего ближайшего родителя с механизмом прокрутки. Если ты обернул шапку в какой-нибудь .wrapper со скрытым переполнением, шапка «прилипнет» к границе этого враппера и уедет вместе с ним. Так что если магия не случается — первым делом открывай DevTools и проверяй overflow у всей цепочки родителей до самого body.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!