Использование параметра scroller

В библиотеке Headroom.js параметр scroller определяет, какой элемент будет отслеживать прокрутку для управления поведением шапки. По умолчанию библиотека слушает window, но при сложной верстке или вложенных блоках может потребоваться задать другой элемент.

Основной синтаксис

var myElement = document.querySelector('#header');

var headroom = new Headroom(myElement, {
  scroller: document.querySelector('.scrollable-container'),
  tolerance: 5,
  offset: 50,
  classes: {
    initial: 'headroom',
    pinned: 'headroom--pinned',
    unpinned: 'headroom--unpinned'
  }
});

headroom.init();
  • scroller — элемент DOM, на котором отслеживается событие прокрутки.
  • Если указано window (по умолчанию), события прокрутки будут применяться к глобальному окну браузера.
  • Можно использовать любой прокручиваемый контейнер, включая div с overflow: auto или overflow: scroll.

Важные особенности

  1. Поддержка вложенных контейнеров Если шапка находится внутри прокручиваемого блока, привязка к window не сработает корректно. В этом случае scroller позволяет отслеживать именно локальную прокрутку.

  2. Производительность Headroom.js использует оптимизированный обработчик события scroll. При больших и сложных контейнерах стоит убедиться, что элемент с scroller корректно рендерится и имеет высоту, чтобы избежать лишних срабатываний.

  3. Комбинация с offset и tolerance Параметры offset и tolerance работают аналогично для кастомного scroller.

    • offset — количество пикселей, после которого начнется скрытие/появление шапки.
    • tolerance — минимальное смещение прокрутки для триггера события.

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

1. Прокрутка отдельного блока:

<div class="scrollable-container" style="height: 300px; overflow-y: scroll;">
  <header id="header">Меню</header>
  <div class="content">...</div>
</div>
var container = document.querySelector('.scrollable-container');
var header = document.querySelector('#header');

var headroom = new Headroom(header, {
  scroller: container,
  offset: 100,
  tolerance: 10
});

headroom.init();

В этом примере шапка будет скрываться и появляться в зависимости от прокрутки именно блока .scrollable-container, а не всей страницы.

2. Использование window и кастомного контейнера одновременно

Можно переключать scroller динамически, например, при изменении режима страницы:

var header = document.querySelector('#header');
var scroller = document.querySelector('.scrollable-container');

var headroom = new Headroom(header, {
  scroller: window
});

headroom.init();

// Позже меняем элемент для отслеживания
headroom.scroller = scroller;
headroom.updateScroller();

Метод updateScroller() обновляет слушатель событий на новый элемент и корректно сбрасывает предыдущие привязки.

Советы по использованию

  • Убедиться, что элемент прокручивается. Если scroller не имеет видимой области для прокрутки, Headroom не будет реагировать на события.
  • Избегать фиксированных размеров контейнера без overflow. Элемент должен быть действительно прокручиваемым, иначе шапка останется статичной.
  • Комбинировать с CSS-классами. Для анимации появления и скрытия шапки удобнее использовать CSS с transition на классы headroom--pinned и headroom--unpinned.

Вывод

Параметр scroller обеспечивает гибкость Headroom.js при работе с нестандартными или вложенными блоками. Он позволяет точно контролировать, где отслеживается прокрутка, и адаптировать поведение шапки под различные макеты и интерфейсы. Использование кастомного scroller вместе с offset и tolerance дает полный контроль над визуальным поведением меню при прокрутке.

Оглавление