Динамическое изменение конфигурации

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

Базовая инициализация выглядит следующим образом:

const header = document.querySelector('header');
const headroom = new Headroom(header, {
    tolerance: 5,
    offset: 100,
    classes: {
        initial: "headroom",
        pinned: "headroom--pinned",
        unpinned: "headroom--unpinned"
    }
});
headroom.init();

Здесь tolerance, offset и classes определяют поведение и визуальное состояние элемента при прокрутке. Все эти параметры могут быть изменены в любой момент времени после инициализации.

Изменение параметров tolerance и offset

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

Изменение этих параметров осуществляется напрямую через свойства объекта Headroom:

// Увеличение чувствительности
headroom.tolerance = 10;

// Сдвиг триггера вниз
headroom.offset = 200;

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

Динамическая смена CSS-классов

Свойство classes задает, какие классы будут добавляться элементу при изменении его состояния (initial, pinned, unpinned, top, notTop, bottom, notBottom). Эти классы можно менять в реальном времени:

headroom.classes = {
    initial: "header-init",
    pinned: "header-visible",
    unpinned: "header-hidden"
};

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

Вызов методов pin() и unpin() с учётом новой конфигурации

Headroom.js предоставляет методы pin() и unpin(), которые можно вызывать вручную, учитывая текущую конфигурацию:

// Принудительное закрепление заголовка
headroom.pin();

// Скрытие заголовка
headroom.unpin();

Эти методы сразу применяют текущее состояние конфигурации, включая новые tolerance, offset и classes. Это позволяет программно управлять поведением элемента на основе логики приложения, например при открытии модальных окон или переключении между секциями страницы.

Обновление конфигурации через destroy() и повторную инициализацию

В некоторых случаях требуется полная замена конфигурации. Для этого используется метод destroy() с последующей повторной инициализацией:

headroom.destroy();

const newConfig = new Headroom(header, {
    tolerance: 20,
    offset: 50,
    classes: {
        initial: "headroom-new",
        pinned: "headroom-new--pinned",
        unpinned: "headroom-new--unpinned"
    }
});
newConfig.init();

Такой подход обеспечивает чистую замену всех параметров без конфликтов с предыдущей конфигурацией.

Реакция на события и динамическая адаптация

Headroom.js поддерживает события pin, unpin, top, notTop, bottom, notBottom, на которые можно подписываться и менять конфигурацию в процессе работы:

header.addEventListener("pin", () => {
    headroom.offset = 150;
});

header.addEventListener("unpin", () => {
    headroom.tolerance = 8;
});

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

Комбинирование всех методов для адаптивного поведения

В сложных интерфейсах часто применяется комбинация всех перечисленных подходов:

  • Изменение tolerance и offset при смене размеров экрана.
  • Динамическая смена CSS-классов для адаптивной анимации.
  • Вызов pin() и unpin() при открытии/закрытии модальных окон.
  • Подписка на события для мгновенного реагирования на скролл.
  • Полная переинициализация через destroy() при смене темы или полной перестройке DOM.

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

Оглавление