Получение состояния элемента в коллбэках

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

Для корректного использования коллбэков необходимо понимать, какие состояния Headroom.js отслеживает и как их можно использовать для динамического изменения интерфейса.

Состояния элемента

Headroom.js выделяет четыре ключевых состояния:

  1. initial – начальное состояние элемента при загрузке страницы.
  2. pinned – элемент закреплён, обычно отображается в верхней части страницы после прокрутки вверх.
  3. unpinned – элемент убран, обычно скрыт при прокрутке вниз.
  4. top / notTop – элемент находится в верхней части страницы (top) или пользователь прокрутил ниже верхней границы (notTop).
  5. bottom / notBottom – элемент достиг нижней границы документа (bottom) или находится выше нижней границы (notBottom).

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

Настройка коллбэков

Для получения состояния элемента используется объект конфигурации при инициализации Headroom.js. Основные методы для отслеживания:

const header = document.querySelector("header");
const headroom = new Headroom(header, {
    tolerance: {
        up: 5,
        down: 10
    },
    offset: 50,
    classes: {
        initial: "headroom--initial",
        pinned: "headroom--pinned",
        unpinned: "headroom--unpinned",
        top: "headroom--top",
        notTop: "headroom--not-top",
        bottom: "headroom--bottom",
        notBottom: "headroom--not-bottom"
    },
    onPin: () => console.log("Состояние: pinned"),
    onUnpin: () => console.log("Состояние: unpinned"),
    onTop: () => console.log("Состояние: top"),
    onNotTop: () => console.log("Состояние: notTop"),
    onBottom: () => console.log("Состояние: bottom"),
    onNotBottom: () => console.log("Состояние: notBottom")
});
headroom.init();

Пояснения по коллбэкам:

  • onPin и onUnpin – вызываются при изменении видимости шапки. Эти события позволяют запускать анимации, менять стили или обновлять состояние интерфейса.
  • onTop и onNotTop – фиксируют положение относительно верхней границы страницы. Полезно для добавления или удаления теней, изменения цвета фона шапки.
  • onBottom и onNotBottom – отслеживают нижнюю границу документа. Используются для изменения поведения в футере или динамической подгрузки контента.

Получение текущего состояния

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

console.log(headroom.elem.classList.contains("headroom--pinned")); // true или false
console.log(headroom.elem.classList.contains("headroom--unpinned")); // true или false

Это позволяет реализовать условную логику:

if (headroom.elem.classList.contains("headroom--pinned")) {
    console.log("Шапка видна");
} else if (headroom.elem.classList.contains("headroom--unpinned")) {
    console.log("Шапка скрыта");
}

Динамическая работа с классами

Использование классов состояния внутри коллбэков позволяет создавать плавные интерфейсные решения. Пример:

headroom.init();

header.addEventListener("transitionend", () => {
    if (header.classList.contains("headroom--unpinned")) {
        header.style.backgroundColor = "transparent";
    } else if (header.classList.contains("headroom--pinned")) {
        header.style.backgroundColor = "#333";
    }
});

Здесь динамически меняется фон шапки в зависимости от её состояния, обеспечивая визуальное сопровождение скролла.

Комбинирование нескольких состояний

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

if (header.classList.contains("headroom--pinned") &&
    header.classList.contains("headroom--notTop")) {
    console.log("Шапка видна и пользователь прокрутил вниз");
}

Это полезно для реализации адаптивных интерфейсов, где поведение шапки зависит не только от направления скролла, но и от позиции на странице.

Рекомендации по оптимизации

  • Использовать классы состояния вместо прямого изменения стилей через JavaScript, чтобы сохранить разделение логики и презентации.
  • Минимизировать сложные вычисления внутри коллбэков, особенно при интенсивном скролле, чтобы не создавать лаги.
  • Использовать tolerance и offset для уменьшения частоты вызовов коллбэков при небольших колебаниях скролла.
  • Объединять несколько действий в один коллбэк для оптимизации производительности.

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

Оглавление