Урок 28 · CSS

position: sticky для меню

Длинный урок увозит меню вверх. Липкая шапка оставляет ссылки под рукой.

Почему это следующий шаг

Фокус уже виден. Теперь меню не исчезает на середине страницы.

Как сделать

Поставь шапке position: sticky и top: 0. Родитель не должен иметь overflow: hidden, иначе sticky не сработает. Задай фон, иначе текст страницы будет читаться сквозь меню. Высоту шапки не фиксируй жёстко, если в ней переносится второй ряд.

header {
  position: sticky;
  top: 0;
  background: #fff;
}

Что проверить

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