Ленивая загрузка библиотеки

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

Ключевой момент — использование динамического import(). Этот метод позволяет загрузить библиотеку только после полной загрузки DOM и только в случае, если элемент для управления действительно присутствует на странице.

Настройка параметров Headroom.js при ленивой загрузке

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

  • tolerance – количество пикселей прокрутки, необходимое для срабатывания. Может быть числом или массивом [upTolerance, downTolerance].

  • offset – расстояние от верхней границы страницы, после которого скрытие/появление шапки становится активным.

  • classes – объект с классами для разных состояний:

    • initial – начальный класс элемента;
    • pinned – шапка зафиксирована при прокрутке вверх;
    • unpinned – шапка скрыта при прокрутке вниз;
    • top – элемент на верхней границе страницы;
    • notTop – элемент не находится в верхней точке.

Пример настройки с разными толерансами для прокрутки вверх и вниз:

const headroom = new Headroom(header, {
  tolerance: { up: 10, down: 5 },
  offset: 100,
  classes: {
    initial: "headroom",
    pinned: "headroom--pinned",
    unpinned: "headroom--unpinned",
    top: "headroom--top",
    notTop: "headroom--not-top"
  }
});

Интеграция с современными фреймворками

При использовании React, Vue или Angular ленивую загрузку Headroom.js можно реализовать через динамический импорт внутри компонента или хука жизненного цикла. Например, в React:

import { useEffect } from "react";

function Header() {
  useEffect(() => {
    let headroomInstance;

    async function loadHeadroom() {
      const { default: Headroom } = await import('headroom.js');
      const header = document.querySelector(".header");
      headroomInstance = new Headroom(header);
      headroomInstance.init();
    }

    loadHeadroom();

    return () => headroomInstance?.destroy();
  }, []);

  return 
Меню
;
}

Преимущества такого подхода:

  • Минимизация объема исходного бандла.
  • Подгрузка скрипта только при необходимости.
  • Автоматическое уничтожение экземпляра при размонтировании компонента.

Оптимизация производительности при ленивой загрузке

Для крупных страниц рекомендуется:

  1. Загружать Headroom.js после критического контента, используя requestIdleCallback или setTimeout.
  2. Инициализировать только на страницах, где присутствует элемент шапки.
  3. Минимизировать CSS-переходы и анимации, чтобы классы Headroom не блокировали основной поток рендеринга.

Пример с requestIdleCallback:

document.addEventListener("DOMContentLoaded", () => {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(async () => {
      const { default: Headroom } = await import('headroom.js');
      const header = document.querySelector(".header");
      new Headroom(header).init();
    });
  } else {
    setTimeout(async () => {
      const { default: Headroom } = await import('headroom.js');
      const header = document.querySelector(".header");
      new Headroom(header).init();
    }, 200);
  }
});

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

Управление событиями Headroom

Headroom.js позволяет отслеживать состояния шапки через кастомные события:

header.addEventListener("headroom.pinned", () => console.log("Шапка зафиксирована"));
header.addEventListener("headroom.unpinned", () => console.log("Шапка скрыта"));
header.addEventListener("headroom.top", () => console.log("Верх страницы"));
header.addEventListener("headroom.notTop", () => console.log("Не на верхней границе"));

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

Оглавление