Как сделать скрытие и показ шапки при скролле с помощью CSS

Скрытие и показ шапки сайта (header) при прокрутке страницы - популярный приём веб-дизайна, который улучшает юзабилити и экономит пространство экрана. Реализовать такой эффект можно средствами CSS и небольшим количеством JavaScript. В этой статье мы разберём готовые решения, которые помогут вам быстро внедрить анимированную шапку на свой сайт.

Зачем скрывать шапку при скролле?

Динамическая шапка решает несколько задач:

• Экономия места - на мобильных устройствах каждый пиксель на счету, скрытая шапка освобождает контентную область.
• Улучшение читаемости - пользователь не отвлекается на навигацию при чтении длинных текстов.
• Современный UX - плавное появление/исчезновение создаёт ощущение отзывчивого интерфейса.

Основной механизм: CSS + JS

Чистого CSS-решения для отслеживания направления скролла не существует, поэтому мы используем JavaScript для определения положения прокрутки и добавляем/убираем CSS-класс. Вот базовый пример.

HTML-разметка шапки

<header id="site-header">
  <nav>...</nav>
</header>

CSS-стили для анимации

#site-header {
  position: fixed;
  top: 0;
  width: 100%;
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
}

#site-header.header-hidden {
  transform: translateY(-100%);
}

Класс .header-hidden сдвигает шапку вверх за пределы экрана. Анимация transition делает движение плавным.

JavaScript-логика

let lastScrollTop = 0;
const header = document.getElementById('site-header');

window.addEventListener('scroll', function() {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop > lastScrollTop) {
    // скролл вниз - скрываем шапку
    header.classList.add('header-hidden');
  } else {
    // скролл вверх - показываем шапку
    header.classList.remove('header-hidden');
  }
  lastScrollTop = scrollTop;
});

Этот код отслеживает направление прокрутки. При движении вниз шапка получает класс header-hidden и исчезает, при движении вверх - класс удаляется и шапка возвращается.

Улучшенная версия с задержкой

Чтобы шапка не мелькала при каждом пикселе скролла, добавьте порог срабатывания:

let lastScrollTop = 0;
const header = document.getElementById('site-header');
const scrollThreshold = 50; // пикселей

window.addEventListener('scroll', function() {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (Math.abs(scrollTop - lastScrollTop) > scrollThreshold) {
    if (scrollTop > lastScrollTop) {
      header.classList.add('header-hidden');
    } else {
      header.classList.remove('header-hidden');
    }
    lastScrollTop = scrollTop;
  }
});

Теперь шапка будет скрываться только после прокрутки на 50 пикселей вниз.

Альтернатива: Intersection Observer

Современный способ - использовать Intersection Observer для отслеживания видимости элемента-триггера. Это производительнее и проще в поддержке.

const header = document.getElementById('site-header');
const trigger = document.getElementById('scroll-trigger'); // невидимый элемент в начале страницы

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      header.classList.add('header-hidden');
    } else {
      header.classList.remove('header-hidden');
    }
  });
});

observer.observe(trigger);

Этот подход не требует обработчика scroll и работает плавнее.

Типичные ошибки и их решение

• Шапка дёргается - проверьте, что у header нет margin или padding, влияющих на позиционирование.
• Не работает на мобильных - убедитесь, что position: fixed поддерживается браузером.
• Шапка не возвращается - возможно, класс добавляется, но не удаляется; проверьте условие else.

Заключение

Скрытие шапки при скролле - простой и эффективный способ улучшить интерфейс. Используя комбинацию CSS-анимации и JavaScript, вы можете реализовать этот эффект за несколько минут. Экспериментируйте с порогами срабатывания и временем анимации, чтобы добиться идеального поведения.