Анимированное меню

Headroom.js — это лёгкая JavaScript-библиотека, предназначенная для управления поведением верхней панели (header) при прокрутке страницы. Она автоматически скрывает или показывает меню в зависимости от направления скролла, что повышает удобство навигации и экономит пространство на экране. Основной механизм основан на отслеживании позиции прокрутки и применении CSS-классов к элементу шапки.

Библиотека не требует jQuery и работает с любыми современными браузерами. В основе лежит событие scroll, которое позволяет отслеживать движение страницы, и динамическое управление классами, чтобы применять анимации через CSS.

Инициализация Headroom.js

Для работы необходимо подключить библиотеку к проекту. В современном окружении это делается через npm или CDN:

<script src="https://unpkg.com/headroom.js@0.12.0/dist/headroom.min.js"></script>

Создание экземпляра Headroom выглядит следующим образом:

// Получение элемента шапки
const header = document.querySelector('.header');

// Инициализация Headroom
const headroom = new Headroom(header, {
  tolerance: {
    up: 10,     // Минимальное смещение вверх для срабатывания показа
    down: 10    // Минимальное смещение вниз для срабатывания скрытия
  },
  offset: 50,    // Смещение страницы от верхнего края для активации
  classes: {
    initial: 'headroom',
    pinned: 'headroom--pinned',     // Класс при показе шапки
    unpinned: 'headroom--unpinned', // Класс при скрытии
    top: 'headroom--top',            // Класс при нахождении в начале страницы
    notTop: 'headroom--not-top'      // Класс при прокрутке вниз
  }
});

// Активация
headroom.init();

Ключевые параметры:

  • tolerance — определяет чувствительность к движению скролла. Можно задавать одно число или объект с отдельными значениями для прокрутки вверх и вниз.
  • offset — задаёт минимальное расстояние, которое нужно прокрутить перед активацией.
  • classes — набор CSS-классов, позволяющий подключать анимации и стили.

CSS-анимации для плавного скрытия и показа

Headroom.js не занимается анимацией напрямую. Эффект достигается через CSS-транзиции. Пример плавного скрытия и появления шапки:

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

.headroom--unpinned {
  transform: translateY(-100%); /* Скрытие вверх */
}

.headroom--pinned {
  transform: translateY(0); /* Показ */
}
  • transform: translateY(-100%) позволяет полностью убрать шапку за пределы видимой области.
  • transition задаёт плавность движения при смене классов.

Продвинутые настройки

Headroom.js поддерживает расширенные возможности:

  1. События жизненного цикла: можно отслеживать моменты прикрепления и открепления шапки.
headroom.on('pin', () => {
  console.log('Меню показано');
});

headroom.on('unpin', () => {
  console.log('Меню скрыто');
});
  1. Настройка скролла по времени: для мобильных устройств часто требуется более чувствительная реакция. Можно регулировать tolerance и offset индивидуально для разных размеров экрана.
const headroom = new Headroom(header, {
  tolerance: window.innerWidth < 768 ? 5 : 10,
  offset: 60
});
  1. Динамическое добавление элементов: Headroom может быть инициализирован на элементах, которые появляются на странице после загрузки, например при динамическом рендеринге меню.

Интеграция с современными фреймворками

Headroom.js легко интегрируется с React, Vue и Angular. Для React используется обёртка react-headroom:

import Headroom from 'react-headroom';

function App() {
  return (
    <Headroom>
      <header className="header">
        Лого и навигация
      </header>
    </Headroom>
  );
}

В Vue можно использовать стандартный lifecycle:

mounted() {
  const header = this.$refs.header;
  const headroom = new Headroom(header);
  headroom.init();
}

Это позволяет сохранять привычное управление состоянием компонента и легко добавлять анимации через CSS.

Практические советы по анимации меню

  • Использовать transform вместо top для GPU-ускоренной анимации.
  • Объединять с opacity для плавного появления/затухания.
  • Применять will-change: transform для оптимизации производительности.
  • Добавлять отдельные классы для разных состояний (top, not-top) для изменения стиля при прокрутке.

Пример комплексного использования

<header class="header">Навигация</header>

<style>
.header {
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #333;
  color: white;
  padding: 20px;
  transition: transform 0.4s ease, background-color 0.4s ease;
  will-change: transform;
}

.headroom--unpinned {
  transform: translateY(-100%);
}

.headroom--pinned {
  transform: translateY(0);
}

.headroom--not-top {
  background-color: rgba(51, 51, 51, 0.9);
}
</style>

<script>
const header = document.querySelector('.header');
const headroom = new Headroom(header, {
  tolerance: { up: 5, down: 5 },
  offset: 50
});
headroom.init();
</script>

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

Оглавление