Скролл внутри контейнера

Headroom.js позволяет управлять поведением элементов при прокрутке страницы или отдельного контейнера. Для скролла внутри контейнера важно не использовать стандартный объект window для прослушивания событий прокрутки, а передать конкретный элемент-контейнер.

Пример инициализации:

// Выбираем контейнер с прокруткой
const scrollContainer = document.querySelector('.scroll-container');

// Инициализируем Headroom на контейнере
const headroom = new Headroom(scrollContainer, {
  offset: 50,        // Высота, после которой начинается скрытие/появление
  tolerance: {
    up: 5,           // Допуск при прокрутке вверх
    down: 5          // Допуск при прокрутке вниз
  },
  classes: {
    pinned: 'headroom-pinned',
    unpinned: 'headroom-unpinned',
    top: 'headroom-top',
    notTop: 'headroom-not-top'
  }
});

// Активируем Headroom
headroom.init();

Ключевой момент: объект Headroom принимает любой элемент с возможностью скролла, а не только window. Для контейнеров с overflow: auto или overflow: scroll это основной способ применения.

Настройка offset и tolerance

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

Пример настройки:

const headroom = new Headroom(scrollContainer, {
  offset: 100,
  tolerance: { up: 10, down: 5 }
});

Такой подход уменьшает “дрожание” при мелких движениях внутри контейнера.

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

Headroom.js предоставляет ряд событий для управления поведением элемента:

  • headroom:pin — вызывается, когда элемент закрепляется (становится видимым).
  • headroom:unpin — вызывается, когда элемент скрывается при прокрутке вниз.
  • headroom:top — когда скролл достиг верхней границы контейнера.
  • headroom:notTop — когда элемент покидает верхнюю границу.

Пример использования:

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

scrollContainer.addEventListener('headroom:unpin', () => {
  console.log('Элемент скрыт');
});

Для контейнера события будут корректно срабатывать при прокрутке внутри него, а не всей страницы.

CSS для контейнера

Для корректной работы Headroom внутри контейнера необходимо учитывать:

.scroll-container {
  height: 400px;          /* Фиксированная высота для прокрутки */
  overflow-y: auto;       /* Вертикальная прокрутка */
  position: relative;     /* Обязательное условие для позиционирования Headroom */
}

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

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

Примечание: контейнер должен иметь position: relative или position: absolute, иначе Headroom не сможет корректно рассчитывать положение элемента внутри него.

Комбинирование с динамическим контентом

Если внутри контейнера контент изменяется (добавляются элементы, меняется высота), рекомендуется пересчитывать offset или заново инициировать Headroom:

// После добавления нового контента
headroom.destroy();
headroom.init();

Или динамически менять offset:

headroom.offset = scrollContainer.querySelector('.header').offsetHeight;

Поддержка плавного скролла

Для контейнеров с CSS-свойством scroll-behavior: smooth Headroom корректно обрабатывает прокрутку, но иногда нужно увеличить tolerance для предотвращения срабатывания слишком часто при небольших скроллах.

.scroll-container {
  scroll-behavior: smooth;
}
const headroom = new Headroom(scrollContainer, {
  offset: 50,
  tolerance: { up: 15, down: 15 }
});

Использование с несколькими контейнерами

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

document.querySelectorAll('.scroll-container').forEach(container => {
  const hr = new Headroom(container, { offset: 60 });
  hr.init();
});

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

Эти методы позволяют гибко управлять элементами при прокрутке внутри контейнеров, обеспечивая удобный интерфейс и плавную анимацию без зависимости от глобального скролла страницы.

Оглавление