Структура коллбэк-функций

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

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

Для начала необходимо создать экземпляр Headroom, передав в него DOM-элемент, который будет управляться:

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

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

Основные события и их коллбэки

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

  1. onPin — срабатывает, когда шапка возвращается в видимую область после скрытия.
  2. onUnpin — срабатывает, когда шапка скрывается при прокрутке вниз.
  3. onTop — срабатывает, когда прокрутка достигает верхней точки страницы.
  4. onNotTop — срабатывает, когда прокрутка уходит вниз от верхней точки.

Пример задания коллбэков:

const headroom = new Headroom(header, {
  onPin: () => {
    console.log('Шапка отображается');
  },
  onUnpin: () => {
    console.log('Шапка скрывается');
  },
  onTop: () => {
    console.log('Достигнут верх страницы');
  },
  onNotTop: () => {
    console.log('Прокрутка ушла вниз');
  }
});

headroom.init();

Параметры и их влияние на коллбэки

Коллбэки тесно связаны с основными настройками Headroom:

  • tolerance — минимальное смещение прокрутки, при котором срабатывают события onPin и onUnpin. Может быть числом (px) или объектом { up: X, down: Y }.
  • offset — количество пикселей от верха страницы, после которого активируется скрытие шапки. Коллбэки onTop и onNotTop реагируют на эту настройку.
  • classes — объект с классами CSS, которые Headroom применяет к элементу. Коллбэки могут использоваться для динамической работы с этими классами.

Пример:

const headroom = new Headroom(header, {
  tolerance: { up: 10, down: 20 },
  offset: 50,
  onPin: () => header.classList.add('pinned'),
  onUnpin: () => header.classList.remove('pinned')
});
headroom.init();

В данном примере коллбэки обеспечивают синхронизацию CSS-анимаций с поведением шапки.

Структура коллбэков для сложных сценариев

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

const headroom = new Headroom(header, {
  onPin: () => {
    header.classList.add('pinned');
    fetch('/api/log-scroll')
      .then(response => response.json())
      .then(data => console.log('Данные логирования:', data));
  },
  onUnpin: () => {
    header.classList.remove('pinned');
    setTimeout(() => {
      console.log('Шапка скрыта, можно запускать дополнительные анимации');
    }, 300);
  }
});
headroom.init();

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

Вызов коллбэков вне Headroom

Хотя коллбэки автоматически вызываются библиотекой, иногда необходимо вызвать их вручную для тестирования или управления UI:

headroom.options.onPin();
headroom.options.onUnpin();

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

Рекомендации по организации коллбэков

  1. Минимизировать побочные эффекты — коллбэки должны изменять только те элементы, которые напрямую связаны с шапкой.
  2. Разделять синхронные и асинхронные операции — асинхронный код внутри коллбэков должен использовать промисы или async/await.
  3. Использовать отдельные функции — для сложной логики вместо размещения всех действий в анонимных функциях.

Пример с выделением функций:

function pinHeader() {
  header.classList.add('pinned');
  animateHeaderIn();
}

function unpinHeader() {
  header.classList.remove('pinned');
  animateHeaderOut();
}

const headroom = new Headroom(header, {
  onPin: pinHeader,
  onUnpin: unpinHeader
});

headroom.init();

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

Оглавление