Интеграция с Intersection Observer API

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

Настройка Headroom.js

Для начала подключается Headroom.js и инициализируется объект:

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

// Инициализация Headroom
const headroom = new Headroom(header, {
  tolerance: 5,         // Чувствительность к прокрутке
  offset: 50,           // Высота смещения перед активацией
  classes: {
    initial: 'header--initial',
    pinned: 'header--pinned',
    unpinned: 'header--unpinned',
  }
});

// Активация Headroom
headroom.init();

Ключевые параметры:

  • tolerance — число пикселей, на которое можно прокрутить страницу, прежде чем будет скрыт или показан заголовок.
  • offset — количество пикселей от верхней границы страницы, после которого начинается реакция.
  • classes — CSS-классы для разных состояний: initial, pinned (показывается), unpinned (скрывается).

Создание Intersection Observer

Intersection Observer API позволяет отслеживать появление или исчезновение элементов в пределах видимой области окна браузера. Для интеграции с Headroom.js создаётся наблюдатель:

const observerOptions = {
  root: null,           // Отслеживание относительно viewport
  rootMargin: '0px',
  threshold: 0          // Срабатывание при пересечении хотя бы 0% элемента
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Элемент видим — закрепляем шапку
      headroom.pin();
    } else {
      // Элемент вышел из зоны видимости — скрываем шапку
      headroom.unpin();
    }
  });
}, observerOptions);

Связывание Observer с DOM-элементами

Наблюдатель применяется к выбранным элементам страницы:

const target = document.querySelector('.hero-section');
observer.observe(target);

В этом примере header будет показываться, когда .hero-section находится в видимой зоне, и скрываться, когда этот блок исчезает с экрана.

Расширенные сценарии

1. Несколько элементов

Можно отслеживать несколько секций и управлять состоянием шапки в зависимости от того, какой элемент виден:

const sections = document.querySelectorAll('.section');
sections.forEach(section => observer.observe(section));

2. Комбинирование с прокруткой

Intersection Observer можно использовать совместно с обычным поведением Headroom.js:

window.addEventListener('scroll', () => {
  if (window.scrollY > 200) {
    headroom.unpin();  // Скроем шапку после определённого скролла
  }
});

Так достигается динамическая реакция и на видимость элементов, и на направление прокрутки.

3. Настройка threshold для частичной видимости

Параметр threshold принимает массив значений от 0 до 1, что позволяет реагировать на различные степени видимости элемента:

const observerOptions = {
  root: null,
  threshold: [0, 0.25, 0.5, 0.75, 1]
};

Здесь можно выполнять разные действия при частичном появлении элемента на экране.

Практические рекомендации

  • Использовать Intersection Observer для крупных блоков, чтобы уменьшить нагрузку на скролл-обработчики.
  • Комбинировать с tolerance и offset Headroom.js для плавного скрытия/показа шапки.
  • В CSS предусмотреть плавные переходы для классов pinned и unpinned для более приятного UX:
.header {
  transition: transform 0.3s ease;
}

.header--unpinned {
  transform: translateY(-100%);
}

.header--pinned {
  transform: translateY(0);
}
  • Проверять производительность на мобильных устройствах, так как частые пересечения элементов могут создавать нагрузку.

Использование событий Headroom.js вместе с Observer

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

header.addEventListener('headroom:pin', () => {
  console.log('Шапка закреплена');
});

header.addEventListener('headroom:unpin', () => {
  console.log('Шапка скрыта');
});

В комбинации с Intersection Observer это позволяет строить сложные сценарии: анимации, подсветку меню, ленивую загрузку контента при прокрутке и видимости элементов.

Интеграция Headroom.js с Intersection Observer API позволяет создавать адаптивные и контекстные интерфейсы, где шапка реагирует не только на направление прокрутки, но и на конкретное положение элементов на странице. Такой подход улучшает UX и делает интерфейс визуально более «живым» и отзывчивым.

Оглавление