Динамическое создание и удаление экземпляров

Headroom.js — это лёгкая библиотека для управления поведением верхней панели (header) при скролле страницы. Динамическое создание экземпляров позволяет подключать и отключать анимацию скрытия/показа хедера в зависимости от состояния страницы или пользовательских действий.

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

const header = document.querySelector('.header');
const headroom = new Headroom(header, {
    tolerance: 5,           // Минимальный сдвиг в пикселях, чтобы срабатывала анимация
    offset: 100,            // Сколько пикселей скролла необходимо пройти, чтобы активировалась реакция
    classes: {              // Классы, применяемые к элементу
        initial: "headroom",
        pinned: "headroom--pinned",
        unpinned: "headroom--unpinned",
        top: "headroom--top",
        notTop: "headroom--not-top"
    }
});
headroom.init();

Ключевые моменты при создании экземпляров:

  • tolerance может быть числом или объектом с разными значениями для направления вверх и вниз.
  • offset задаёт минимальное смещение скролла перед срабатыванием анимации.
  • classes позволяют интегрировать Headroom.js с существующими стилями CSS.

Управление жизненным циклом экземпляра

После создания экземпляра возможно полное управление его поведением:

  • Инициализация: headroom.init() запускает отслеживание скролла.
  • Деактивация: headroom.destroy() отключает наблюдение за скроллом и убирает все динамически добавленные классы.
  • Принудительное состояние: методы headroom.pin() и headroom.unpin() позволяют вручную закреплять или скрывать хедер без скролла.

Пример динамического управления:

let dynamicHeader;

function createHeader() {
    const header = document.querySelector('.header');
    dynamicHeader = new Headroom(header);
    dynamicHeader.init();
}

function removeHeader() {
    if (dynamicHeader) {
        dynamicHeader.destroy();
        dynamicHeader = null;
    }
}

Создание нескольких экземпляров

Headroom.js поддерживает работу с несколькими элементами одновременно. Важно создавать отдельные экземпляры для каждого хедера:

const headers = document.querySelectorAll('.header');
const instances = [];

headers.forEach(header => {
    const instance = new Headroom(header, { offset: 50 });
    instance.init();
    instances.push(instance);
});

// Позже можно отключить все экземпляры
instances.forEach(instance => instance.destroy());

Такой подход полезен для страниц с динамическим контентом, где несколько панелей появляются или исчезают в DOM.

Динамическое создание на события

Иногда требуется создавать экземпляр только после определённого действия пользователя:

document.querySelector('#loadHeaderButton').addEventListener('click', () => {
    const header = document.querySelector('.dynamic-header');
    const headroomInstance = new Headroom(header, { tolerance: 10 });
    headroomInstance.init();
});
  • Элемент может быть добавлен в DOM через JavaScript, а затем сразу подключён к Headroom.js.
  • Это предотвращает лишние вычисления и улучшает производительность на страницах с большим количеством элементов.

Удаление экземпляров и очистка классов

Метод destroy() не только отключает скролл-отслеживание, но и возвращает элемент в исходное состояние:

headroom.destroy();
// Все классы headroom удалены с элемента

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

Подытоживающие принципы

  • Каждый элемент DOM требует своего экземпляра Headroom.js.
  • Инициализация должна происходить после появления элемента в DOM.
  • Метод destroy() — обязательный инструмент при удалении элементов или отключении анимации.
  • Динамическое создание экземпляров удобно использовать для ленивой загрузки интерфейса и страниц с подгружаемым контентом.

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

Оглавление