Инициализация через JavaScript

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

Подключение библиотеки

Перед инициализацией необходимо убедиться, что скрипт Headroom.js подключён к странице. Наиболее распространённые способы подключения:

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

Или через пакетный менеджер:

npm install headroom.js

При использовании npm скрипт подключается в проект следующим образом:

import Headroom from 'headroom.js';

Создание экземпляра

Для работы с Headroom создаётся объект, которому передаётся DOM-элемент. Например, для управления шапкой:

const header = document.querySelector('header');
const headroom = new Headroom(header);

Здесь header – это любой элемент, который необходимо скрывать или показывать при прокрутке страницы.

Настройка поведения через параметры

Headroom.js поддерживает множество опций, которые задаются при создании экземпляра:

const headroom = new Headroom(header, {
  tolerance: 5,               // Порог в пикселях перед активацией
  offset: 100,                // Расстояние от верха страницы, после которого шапка начинает реагировать
  classes: {                  // CSS-классы для разных состояний
    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('Pinned'); },     // Коллбек при показе шапки
  onUnpin: function() { console.log('Unpinned'); }, // Коллбек при скрытии шапки
  onTop: function() { console.log('Top'); },        // Коллбек при достижении верха страницы
  onNotTop: function() { console.log('Not Top'); }, // Коллбек при уходе от верха страницы
  onBottom: function() { console.log('Bottom'); },  // Коллбек при достижении низа страницы
  onNotBottom: function() { console.log('Not Bottom'); } // Коллбек при уходе от низа
});

Ключевые моменты настроек:

  • tolerance определяет чувствительность элемента к прокрутке. Может быть числом или объектом с отдельными значениями для направления вверх и вниз:
tolerance: { up: 10, down: 5 }
  • offset позволяет контролировать момент появления/скрытия шапки. Если задано большое значение, элемент будет скрываться только после значительного скролла.
  • classes дают возможность полностью контролировать CSS-анимации. Библиотека просто переключает классы, оставляя разработчику оформление.

Активация Headroom

После создания экземпляра необходимо запустить его с помощью метода init():

headroom.init();

Метод инициализации добавляет слушатели событий скролла и управляет состояниями элемента в реальном времени. Без вызова init() объект Headroom останется неактивным, несмотря на настройки.

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

  • Динамическая смена конфигурации:
headroom.options.offset = 200;
headroom.options.tolerance = { up: 15, down: 5 };
  • Остановка и перезапуск отслеживания прокрутки:
headroom.destroy(); // Удаляет все обработчики событий
headroom.init();    // Снова активирует Headroom
  • Программное управление состояниями:
headroom.pin();   // Принудительно показать шапку
headroom.unpin(); // Принудительно скрыть шапку

Интеграция с анимациями

Headroom.js часто используется вместе с CSS-анимациями. Переходы на основе классов позволяют плавно скрывать или показывать элементы. Пример CSS:

.headroom {
  transition: transform 0.3s ease-in-out;
}
.headroom--pinned {
  transform: translateY(0%);
}
.headroom--unpinned {
  transform: translateY(-100%);
}

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

Практическая организация кода

Для крупных проектов рекомендуется создавать отдельный модуль управления шапкой:

// headerController.js
import Headroom from 'headroom.js';

export function initHeader() {
  const header = document.querySelector('header');
  const headroom = new Headroom(header, {
    offset: 150,
    tolerance: { up: 5, down: 10 }
  });
  headroom.init();
  return headroom;
}

В основном файле можно подключать и инициализировать:

import { initHeader } from './headerController';
const headerControl = initHeader();

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

Оглавление