Как с помощью CSS создать «липкую» шапку сайта (Sticky Header), которая не исчезает при прокрутке страницы?

Создать «липкую» шапку сайта (Sticky Header) с помощью CSS можно несколькими способами. Рассмотрим каждый из них подробно.

## Способ 1: position: sticky (рекомендуемый)

Это самый современный и удобный метод. Достаточно добавить всего несколько строк CSS:

css
header {
position: sticky;
top: 0;
z-index: 1000;
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

Свойство `position: sticky` работает как комбинация `relative` и `fixed`: элемент ведёт себя как обычный до тех пор, пока не достигает указанного порога (в нашем случае `top: 0`), после чего «прилипает» к верхнему краю экрана.

**Важные нюансы:**
— Обязательно укажите `top`, `bottom`, `left` или `right` — без этого sticky не сработает.
— Родительский элемент не должен иметь `overflow: hidden` или `overflow: auto`, иначе sticky перестанет работать.
— Шапка будет «прилипать» только в пределах своего родительского контейнера.

## Способ 2: position: fixed

Этот метод фиксирует элемент относительно окна браузера:

css
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: #ffffff;
}

body {
padding-top: 70px; /* высота шапки */
}

**Отличие от sticky:** при `fixed` элемент полностью выпадает из потока документа, поэтому контент под ним нужно сдвигать вниз с помощью `padding-top` или `margin-top` на `body`.

## Добавление эффекта при прокрутке с помощью JavaScript

Чтобы шапка меняла внешний вид при скролле (например, становилась меньше или получала тень), можно добавить небольшой скрипт:

javascript
window.addEventListener(‘scroll’, () => {
const header = document.querySelector(‘header’);
if (window.scrollY > 50) {
header.classList.add(‘scrolled’);
} else {
header.classList.remove(‘scrolled’);
}
});

css
header.scrolled {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 0.95);
transition: all 0.3s ease;
}

## Поддержка браузеров

`position: sticky` поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge). Для старых версий Safari может потребоваться префикс `-webkit-sticky`. IE не поддерживает это свойство, поэтому для него используйте `position: fixed` как запасной вариант.

## Рекомендации

— Всегда задавайте `z-index` для шапки, чтобы она перекрывала остальной контент.
— Используйте `background-color` или `backdrop-filter: blur()` для полупрозрачного эффекта.
— Тестируйте шапку на мобильных устройствах — там поведение sticky может отличаться.