Как при помощи нескольких строк кода скрыть/показать меню сайта при скроллинге

Исходные условия

Горизонтальное меню в верхней части сайта.

Задача

Без подключения сторонних JS-библиотек, только при помощи ванильного JavaScript, скрывать меню, при скроллинге страницы вниз, чтобы максимально освободить пространство для чтения, и снова показывать меню, при скроллинге страницы вверх.

Решение

В этом решении используются готовые стили Tailwind, но их можно заменить на стили любой другой CSS библиотеки, например, Bootstrap или на свои собственные стили.

1. Делаем меню фиксированным при помощи класса fixed:

<!-- html -->
<header id="header" class="fixed ...">
  ...
  <nav class="...">...</nav>
  ...
</header>

2. Добавляем классы transition-all и duration-500, чтобы меню скрывалось и выдвигалось с плавной анимацией:

<!-- html -->
<header id="header" class="fixed transition-all duration-500 ...">
  ...
  <nav class="...">...</nav>
  ...
</header>

3. Добавляем код JavaScript:

// js
let currentY = window.scrollY;
let previousY = currentY;
const header = document.getElementById("header");
const scrollHandler = () => {
  previousY = currentY;
  currentY = window.scrollY;
  if (currentY > 50) {
    // делаем фон меню непрозрачным
    header.classList.add("bg-white", "shadow");
  } else {
    // возвращаем прозрачность
    header.classList.remove("bg-white", "shadow");
  }
  if (currentY > 300 && currentY >= previousY) {
    // скрываем меню
    header.classList.add("-translate-y-full");
  } else {
    // показываем меню
    header.classList.remove("-translate-y-full");
  }
};
window.addEventListener("scroll", scrollHandler);
scrollHandler();

Пояснения:

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

  Это поведение можно изменить по своему усмотрению, например, сделать фон меню полупрозрачным или совсем непрозрачным, и, при этом, не менять его прозрачность при скроллинге.

• При скроллинге страницы вниз более, чем на 300 пикселей, меню плавно “уезжает” за верхние пределы экрана, чтобы максимально освободить пространство для чтения. При скроллинге страницы вверх меню сразу же “выезжает” назад.

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