Обработка прокрутки окна

Stickybits — это лёгкая JavaScript-библиотека для управления «липким» поведением элементов при прокрутке страницы. Основная цель библиотеки — сделать элементы, которые должны оставаться на виду при скролле, максимально гибкими и управляемыми, без необходимости использования сложного CSS position: sticky и сложных хаков с scroll-событиями.

При подключении Stickybits к элементу создаётся «контейнер», который отслеживает положение элемента относительно окна браузера и динамически применяет классы и стили для реализации поведения «прилипания».

// Инициализация Stickybits
const sticky = stickybits('.sticky-element', {
  useStickyClasses: true,
  stickyBitStickyOffset: 0,
});

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

  • useStickyClasses — позволяет библиотеке автоматически добавлять классы .is-sticky, .is-stuck и .is-flowing для управления состояниями элемента.
  • stickyBitStickyOffset — задаёт смещение элемента от верхней границы окна при активации «прилипания».
  • verticalPosition — устанавливает позицию прилипшего элемента (top или bottom).
  • noStyles — отключает автоматическую установку стилей; используется, если стили обрабатываются через CSS.

Состояния «липкого» элемента

Stickybits выделяет три основных состояния:

  1. Flowing — элемент находится в своём естественном положении в потоке документа.
  2. Sticky — элемент прилип к верхней (или нижней) границе окна, когда достиг точки активации.
  3. Stuck — элемент «прилип» к контейнеру, и дальнейшая прокрутка не двигает его дальше за пределы родителя.

Эти состояния обозначаются соответствующими CSS-классами, что облегчает стилизацию:

.sticky-element.is-sticky {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.sticky-element.is-stuck {
  opacity: 0.8;
}

Обработка прокрутки окна

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

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

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

function updatePosition() {
  sticky.update();
  requestAnimationFrame(updatePosition);
}
requestAnimationFrame(updatePosition);

Программное управление состояниями

Stickybits предоставляет методы для динамического контроля элементов:

  • stickybits.addInstance(element) — добавляет новый элемент для отслеживания.
  • stickybits.removeInstance(element) — удаляет элемент из списка «липких».
  • stickybits.update(element) — пересчитывает позицию конкретного элемента.

Пример динамического добавления элемента при скролле:

window.addEventListener('scroll', () => {
  if (window.scrollY > 500) {
    stickybits.addInstance(document.querySelector('.new-sticky'));
  }
});

Работа с адаптивным контентом

Stickybits корректно обрабатывает изменение размеров окна и динамическое появление контента.

  • Resize: библиотека автоматически обновляет положение элемента при изменении ширины и высоты окна, если включён параметр stickyBitStickyOffset.
  • Контейнеры с динамическим контентом: Stickybits учитывает высоту родителя при расчёте точки «stuck», что предотвращает перекрытие элементов.
window.addEventListener('resize', () => {
  sticky.update();
});

Комбинация с CSS-анимациями

Stickybits легко интегрируется с CSS-анимациями для плавного перехода между состояниями. Для этого достаточно использовать классы .is-sticky и .is-stuck:

.sticky-element {
  transition: all 0.3s ease;
}

Это позволяет создавать эффект «выдвигающегося» меню, фиксированных панелей или подсветки заголовков при прокрутке.

Ограничения и особенности

  • Stickybits не работает с абсолютно позиционированными родителями, так как расчёт смещения основывается на нормальном потоке документа.
  • Элементы с display: table или display: inline-block могут требовать обёртки для корректной работы.
  • Для сложных сценариев с несколькими «липкими» элементами внутри одного контейнера необходимо вручную управлять их порядком через z-index.

Stickybits упрощает работу с прокруткой и «липкими» элементами, обеспечивая стабильное и предсказуемое поведение, при этом снижая необходимость ручной работы со scroll-событиями и сложными CSS-правилами.

Оглавление