Базовый синтаксис и параметры

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

Через npm:

npm install stickybits

Через CDN:

После подключения библиотека готова к работе и может применяться к любым DOM-элементам.

Инициализация Stickybits

Создание липкого элемента осуществляется вызовом функции stickybits() с указанием CSS-селектора:

stickybits('.sticky-element');

Ключевой момент: функция возвращает объект с методами управления, что позволяет изменять поведение элементов после инициализации.

Основные параметры

Stickybits поддерживает несколько параметров для тонкой настройки работы липких элементов. Они передаются вторым аргументом в виде объекта.

stickybits('.sticky-element', {
  stickyBitStickyOffset: 0,
  useStickyClasses: true,
  verticalPosition: 'top',
  parentClass: 'sticky-parent',
  scrollEl: window
});

Описание параметров:

  • stickyBitStickyOffset (number) — смещение от верхней границы контейнера. Полезно, если требуется оставить отступ между верхом окна и липким элементом.

  • useStickyClasses (boolean) — добавление CSS-классов для различных состояний элемента:

    • js-is-sticky — элемент становится липким,
    • js-is-stuck — элемент достиг нижней границы родителя,
    • js-is-flowing — элемент не липкий, находится в обычном потоке документа.

  • verticalPosition (string) — определяет вертикальное положение элемента при закреплении. Возможные значения: 'top' или 'bottom'.

  • parentClass (string) — CSS-класс родительского контейнера, который используется для расчёта границ движения липкого элемента.

  • scrollEl (DOM node / window) — элемент, в пределах которого выполняется отслеживание прокрутки. По умолчанию используется window.

Пример с пользовательским смещением

stickybits('.sticky-header', {
  stickyBitStickyOffset: 20,
  verticalPosition: 'top'
});

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

Использование CSS-классов для состояния

Включение useStickyClasses: true позволяет управлять стилями через CSS в зависимости от состояния элемента:

.js-is-sticky {
  position: fixed;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.js-is-stuck {
  position: absolute;
  bottom: 0;
}

Эти классы динамически добавляются и удаляются библиотекой при прокрутке.

Множественные элементы

Stickybits поддерживает работу сразу с несколькими элементами:

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

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

Методы объекта Stickybits

После инициализации stickybits возвращает объект с методами:

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

Пример использования метода update():

const stickyInstance = stickybits('.sticky-element');

window.addEventListener('resize', () => {
  stickyInstance.update();
});

Настройка через HTML-атрибуты

Stickybits может использоваться без JavaScript-конфигурации через data-* атрибуты:

Библиотека автоматически применит указанные значения при инициализации.

Особенности поведения

  1. Смещение от родителя: липкий элемент не выйдет за пределы родителя, даже если прокрутка продолжается.
  2. Поддержка мобильных устройств: Stickybits использует современный CSS position: sticky там, где это возможно, и fallback на JavaScript для старых браузеров.
  3. Лёгкость: библиотека весит всего несколько килобайт и не требует дополнительных зависимостей.
Оглавление