Закреплённое меню для лендинга: position sticky и JavaScript

Как сделать меню, которое остаётся вверху экрана при прокрутке: одна строка CSS с position: sticky и вариант, когда меню появляется только после первого экрана.

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

Простой способ: position sticky

<header class="menu">…</header>

.menu {
  position: sticky;
  top: 0;
  z-index: 999;
  height: 50px;
  background: #000;
}

Меню стоит на своём месте в потоке страницы и «прилипает» к верху окна, когда до него доходит прокрутка. Контент под ним не прыгает, JavaScript не нужен. z-index держит меню над остальными блоками.

Меню появляется после первого экрана

Если меню должно закрепляться только после того, как посетитель пролистал первый экран:

.menu.floating { position: fixed; top: 0; left: 0; right: 0; }

<script>
const menu = document.querySelector('.menu');
window.addEventListener('scroll', function () {
  menu.classList.toggle('floating', window.scrollY > 450);
}, { passive: true });
</script>

Когда страница прокручена больше чем на 450 пикселей, меню получает класс floating и закрепляется. Флаг passive: true говорит браузеру, что обработчик не мешает прокрутке, — страница не тормозит.

Если на сайте jQuery

$(window).on('scroll', function () {
  $('.menu').toggleClass('floating', $(this).scrollTop() > 450);
});