Добавление кастомных событий

Headroom.js предоставляет простой и мощный способ управления поведением верхнего навигационного блока при прокрутке страницы. Помимо стандартных событий (pin, unpin, top, notTop, bottom, notBottom), библиотека поддерживает создание кастомных событий, что позволяет расширять функциональность и интегрировать Headroom в сложные интерфейсы.

Основы кастомных событий

В Headroom.js каждое событие связано с определённым состоянием шапки: закреплена (pinned) или скрыта (unpinned). Библиотека использует события DOM для передачи этих состояний. Для добавления кастомного события можно воспользоваться стандартными методами addEventListener и dispatchEvent в сочетании с CustomEvent.

Пример создания кастомного события:

const header = document.querySelector('header');

const customEvent = new CustomEvent('headerPinned', {
  detail: {
    time: new Date(),
    message: 'Шапка закреплена'
  }
});

header.dispatchEvent(customEvent);
  • CustomEvent принимает два параметра: имя события (headerPinned) и объект с данными (detail), которые будут доступны обработчику.
  • dispatchEvent инициирует событие на выбранном элементе, позволяя любому подписчику на это событие реагировать.

Интеграция кастомных событий с Headroom.js

Для связки с логикой Headroom можно использовать встроенные коллбеки, такие как onPin, onUnpin, onTop, onNotTop и др. В этих коллбеках можно вызывать кастомные события, что позволяет расширять стандартное поведение без модификации библиотеки.

Пример интеграции:

const header = document.querySelector('header');
const headroom = new Headroom(header, {
  tolerance: 5,
  offset: 100,
  onPin: function() {
    const event = new CustomEvent('headerPinned', {
      detail: { time: new Date() }
    });
    header.dispatchEvent(event);
  },
  onUnpin: function() {
    const event = new CustomEvent('headerUnpinned', {
      detail: { time: new Date() }
    });
    header.dispatchEvent(event);
  }
});

headroom.init();

Теперь на header можно подписаться и обрабатывать эти события отдельно:

header.addEventListener('headerPinned', (e) => {
  console.log('Событие headerPinned сработало в', e.detail.time);
});

header.addEventListener('headerUnpinned', (e) => {
  console.log('Событие headerUnpinned сработало в', e.detail.time);
});

Использование данных из кастомного события

Объект detail в CustomEvent позволяет передавать любую информацию: параметры анимации, идентификаторы элементов, состояние страницы и т.д. Это особенно полезно для динамических интерфейсов:

const event = new CustomEvent('headerAnimationStart', {
  detail: {
    animationType: 'slide-up',
    duration: 300
  }
});

header.dispatchEvent(event);

header.addEventListener('headerAnimationStart', (e) => {
  const { animationType, duration } = e.detail;
  console.log(`Началась анимация ${animationType}, длительность: ${duration}ms`);
});

Создание глобальных кастомных событий

Иногда необходимо отслеживать состояние шапки на уровне всего документа, а не только элемента header. Для этого кастомное событие можно диспатчить на document:

const event = new CustomEvent('globalHeaderPinned', {
  detail: { headerId: 'main-header' }
});

document.dispatchEvent(event);

document.addEventListener('globalHeaderPinned', (e) => {
  console.log('Главная шапка закреплена', e.detail.headerId);
});

Такой подход позволяет связывать Headroom с другими модулями интерфейса: меню, боковыми панелями, уведомлениями.

Важные рекомендации при работе с кастомными событиями

  1. Уникальные имена событий Используйте осмысленные и уникальные названия, чтобы не возникало конфликтов с другими библиотеками или нативными событиями DOM.

  2. Передача полезных данных Через detail передавайте только необходимые данные. Это облегчает обработку и снижает нагрузку на память.

  3. Очистка обработчиков Если элементы удаляются из DOM, удаляйте соответствующие слушатели событий с помощью removeEventListener, чтобы избежать утечек памяти.

  4. Комбинирование с анимациями Кастомные события идеально подходят для запуска анимаций CSS или JavaScript в момент закрепления или скрытия шапки.

Примеры практических кейсов

  • Изменение стиля шапки при закреплении: кастомное событие может запускать анимацию изменения цвета фона или тени.
  • Синхронизация с боковыми меню: при скрытии шапки автоматически скрывать или смещать элементы меню.
  • Логирование поведения пользователей: фиксировать время и частоту закрепления/открепления шапки для аналитики интерфейса.

Использование кастомных событий расширяет возможности Headroom.js, превращая библиотеку в гибкий инструмент для сложных интерфейсов, где шапка сайта реагирует не только на прокрутку, но и на внешние условия и логику приложения.

Оглавление