Headroom и infinite scroll

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

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

// Подключение через npm или CDN
import Headroom from "headroom.js";

// Получение элемента шапки
const header = document.querySelector(".header");

// Инициализация Headroom
const headroom = new Headroom(header, {
    tolerance: {
        up: 5,    // минимальное смещение вверх для показа шапки
        down: 10  // минимальное смещение вниз для скрытия шапки
    },
    offset: 50,     // расстояние прокрутки, после которого начинает работать Headroom
    classes: {
        initial: "headroom",
        pinned: "headroom--pinned",
        unpinned: "headroom--unpinned",
        top: "headroom--top",
        notTop: "headroom--not-top"
    }
});

// Запуск наблюдения за прокруткой
headroom.init();

Ключевым моментом является объект classes, который позволяет задавать кастомные CSS-классы для различных состояний шапки.

Основные состояния шапки

Headroom.js использует четыре состояния:

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

CSS-анимации для плавного появления и скрытия шапки могут выглядеть так:

.headroom {
    transition: transform 0.3s ease-in-out;
}
.headroom--unpinned {
    transform: translateY(-100%);
}
.headroom--pinned {
    transform: translateY(0%);
}

Использование Headroom.js с бесконечной прокруткой

Infinite scroll (бесконечная прокрутка) подразумевает динамическую подгрузку контента при достижении конца страницы. Интеграция с Headroom.js требует аккуратного отслеживания события скролла и состояния страницы.

Пример реализации бесконечной прокрутки:

let page = 1;
const container = document.querySelector(".content");

window.addEventListener("scroll", () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;

    // Подгрузка контента за 100px до конца страницы
    if (scrollTop + windowHeight >= documentHeight - 100) {
        loadMoreContent();
    }
});

function loadMoreContent() {
    page++;
    fetch(`/api/content?page=${page}`)
        .then(response => response.json())
        .then(data => {
            data.items.forEach(item => {
                const element = document.createElement("div");
                element.className = "item";
                element.innerHTML = item.html;
                container.appendChild(element);
            });
            // Обновляем Headroom после добавления нового контента
            headroom.update();
        });
}

Особенности работы Headroom.js с динамическим контентом:

  • После добавления новых элементов в DOM необходимо вызывать метод headroom.update(), чтобы пересчитать высоту и позиции шапки.
  • Использование tolerance и offset помогает предотвратить «дребезг» шапки при частой подгрузке контента.
  • Анимации должны быть адаптивны, чтобы скрытие и показ шапки оставались плавными даже при резкой загрузке большого объёма данных.

Настройка чувствительности к прокрутке

Параметр tolerance может быть задан как числом или объектом с раздельной настройкой для прокрутки вверх и вниз.

tolerance: {
    up: 15,   // показывает шапку после прокрутки вверх на 15px
    down: 20  // скрывает шапку после прокрутки вниз на 20px
}

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

Дополнительные методы и события

Headroom.js предоставляет несколько полезных методов:

  • headroom.init() – запуск библиотеки.
  • headroom.destroy() – отключение наблюдения за прокруткой.
  • headroom.unpin() – программное скрытие шапки.
  • headroom.pin() – программное показание шапки.
  • headroom.update() – пересчет позиции и высоты шапки после динамического изменения DOM.

Также доступны события через кастомные колбэки:

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

Оптимизация работы с infinite scroll

  • Использовать дебаунс или троттлинг для обработчика события scroll, чтобы уменьшить нагрузку на браузер.
  • Минимизировать количество перерисовок DOM при подгрузке контента.
  • Поддерживать адаптивные CSS-анимации, чтобы скрытие и показ шапки выглядели естественно при быстром скролле.
  • Для больших списков рекомендуется использовать виртуализацию элементов, чтобы Headroom корректно реагировал на прокрутку без просадок FPS.

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

Оглавление