Шапка с изменением стиля при скролле

Headroom.js — это легковесная библиотека на JavaScript, предназначенная для управления видимостью шапки сайта при скролле страницы. Она позволяет автоматически скрывать или показывать верхний навигационный блок в зависимости от направления прокрутки и скорости скролла, создавая более динамичный и удобный интерфейс.

Главная концепция Headroom.js заключается в отслеживании позиции скролла и применении соответствующих CSS-классов к элементу шапки. Это позволяет реализовать эффекты «умной» шапки без сложных ручных вычислений.

Инициализация и базовая настройка

Для начала необходимо подключить библиотеку. Если используется npm:

npm install headroom.js

В HTML:

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

Простейший способ инициализации:

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

// Создание экземпляра Headroom
const headroom = new Headroom(header);

// Инициализация
headroom.init();

После этого библиотека будет автоматически добавлять и удалять классы в зависимости от скролла:

  • headroom--unpinned — шапка скрыта при скролле вниз
  • headroom--pinned — шапка показана при скролле вверх
  • headroom--top — страница находится в верхней точке
  • headroom--not-top — страница ушла вниз от верхней точки

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

Настройка поведения шапки

Headroom.js предоставляет возможность тонкой настройки через объект конфигурации:

const options = {
  tolerance: 5,          // Минимальное смещение скролла для срабатывания
  offset: 100,           // Отступ от верха страницы до активации скрытия
  classes: {             // Классы, которые будут применяться
    initial: 'headroom',
    pinned: 'headroom--pinned',
    unpinned: 'headroom--unpinned',
    top: 'headroom--top',
    notTop: 'headroom--not-top',
    bottom: 'headroom--bottom',
    notBottom: 'headroom--not-bottom',
  },
  onPin: function() { console.log('Шапка показана'); },
  onUnpin: function() { console.log('Шапка скрыта'); },
  onTop: function() { console.log('Страница вверху'); },
  onNotTop: function() { console.log('Страница ушла вниз'); }
};

const headroom = new Headroom(header, options);
headroom.init();

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

  • tolerance — контролирует чувствительность к малым движениям скролла. Можно задавать число или объект с раздельной настройкой для up и down.
  • offset — определяет, с какой позиции страницы шапка начнет реагировать на прокрутку.
  • classes — позволяет переопределять стандартные CSS-классы.
  • onPin, onUnpin, onTop, onNotTop — колбэки для выполнения произвольного кода при смене состояния.

Примеры CSS-анимации

Headroom.js только добавляет и удаляет классы, визуальные эффекты создаются через CSS:

.header {
  position: fixed;
  top: 0;
  width: 100%;
  transition: transform 0.3s ease, background-color 0.3s ease;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 1000;
}

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

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

.headroom--not-top {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

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

Расширенные возможности

1. Комбинирование с другими библиотеками: Headroom.js хорошо работает с фреймворками вроде Vue, React или Angular. В React можно обернуть шапку в компонент и инициализировать Headroom при монтировании.

2. Динамическое изменение настроек: После инициализации можно использовать методы:

headroom.unpin();   // принудительно скрыть
headroom.pin();     // принудительно показать
headroom.destroy(); // удалить все события и классы

3. Раздельная настройка чувствительности:

const options = {
  tolerance: { up: 5, down: 10 }
};

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

4. Поддержка touch-событий: Headroom.js корректно работает на мобильных устройствах, учитывая скорость свайпов.

Практические рекомендации

  • Устанавливать offset выше высоты шапки, чтобы скрытие не срабатывало при малом скролле.
  • Использовать tolerance для предотвращения дергания шапки при микродвижениях.
  • Объединять с CSS-переходами и transform для плавной анимации.
  • Применять колбэки для интеграции с логикой сайта: изменение состояния меню, переключение темы, логирование событий.

Интеграция с адаптивным дизайном

Для адаптивных сайтов важно учитывать:

  • Высоту шапки при разных разрешениях экрана.
  • Разные настройки offset и tolerance для мобильных устройств.
  • Использование медиазапросов в CSS для корректного отображения эффектов на маленьких экранах:
@media (max-width: 768px) {
  .header {
    height: 60px;
  }

  .headroom--unpinned {
    transform: translateY(-60px);
  }
}

Такое решение позволяет поддерживать одинаковый UX на десктопе и мобильных устройствах, сохраняя динамическую шапку без конфликтов с адаптивной версткой.

Оглавление