Инициализация библиотеки

Stickybits — это лёгкая JavaScript-библиотека для создания «липких» элементов на странице, которые фиксируются при прокрутке. Инициализация библиотеки начинается с подключения скрипта и вызова функции stickybits с нужными параметрами.

Подключение библиотеки

Stickybits может быть подключён как через CDN, так и через пакетный менеджер npm.

Через CDN:

<script src="https://cdn.jsdelivr.net/npm/stickybits@3.7.8/dist/stickybits.min.js"></script>

Через npm:

npm install stickybits

После установки через npm библиотека импортируется:

import stickybits from 'stickybits';

Базовая инициализация

Для создания «липкого» элемента достаточно вызвать функцию stickybits и передать в неё селектор:

stickybits('.my-sticky-element');

В этом случае элементы с классом .my-sticky-element автоматически станут «липкими» при прокрутке.

Объект конфигурации

Stickybits позволяет детально настроить поведение элементов через объект опций, передаваемый вторым аргументом:

stickybits('.my-sticky-element', {
  stickyBitStickyOffset: 20,
  useStickyClasses: true,
  verticalPosition: 'top'
});

stickyBitStickyOffset — смещение от края окна браузера (в пикселях), при котором элемент станет липким.
useStickyClasses — если true, библиотека добавляет CSS-классы (.js-is-sticky, .js-is-stuck) для управления стилями через CSS.
verticalPosition — позиция элемента: 'top' или 'bottom'.

Поддержка нескольких элементов

Stickybits может быть применён к группе элементов через общий селектор. Все элементы станут независимыми «липкими» блоками.

stickybits('.sticky-item', {
  stickyBitStickyOffset: 10,
  useStickyClasses: true
});

В этом случае библиотека создаст отдельные управляющие объекты для каждого элемента.

Управление и обновление

Возвращаемое значение функции stickybits — массив объектов для каждого элемента. Это позволяет программно управлять состоянием элементов.

const stickies = stickybits('.my-sticky-element');

stickies.forEach(sticky => {
  // Принудительно удалить "липкость"
  sticky.cleanup();
});

Методы:

update() — пересчитывает позицию элемента после изменений DOM или размеров окна.
cleanup() — полностью удаляет эффекты Stickybits с элемента.
stick() / unstick() — ручное управление состоянием элемента.

Особенности работы

Fallback для старых браузеров: Если браузер не поддерживает position: sticky, Stickybits автоматически использует абсолютное позиционирование с пересчётом координат.
Поддержка горизонтальной прокрутки: Библиотека рассчитана на вертикальные «липкие» блоки, горизонтальная фиксация требует кастомной логики.
CSS-классы: Включение useStickyClasses упрощает применение анимаций и стилей в момент активации «липкости».

Инициализация с делегированием

Можно инициализировать Stickybits для элементов, которые появятся динамически, используя делегирование через Jav * aScript:

document.addEventListener('DOMContentLoaded', () => {
  stickybits('.dynamic-sticky', { stickyBitStickyOffset: 15 });
});

Это гарантирует корректную работу «липких» элементов даже при асинхронной загрузке контента.