Управление через API

Stickybits — это лёгкая JavaScript-библиотека, предназначенная для реализации «липких» элементов на странице. Она предоставляет гибкий API для контроля поведения элементов при скролле. Управление через API позволяет динамически изменять состояние элементов, отключать или обновлять их без необходимости пересоздавать всю структуру.

Инициализация и базовое использование

Для создания липкого элемента используется функция stickybits(). Она принимает селектор или DOM-элемент и объект с опциями:

const sticky = stickybits('.sticky-element', {
  stickyBitStickyClass: 'is-sticky',
  useStickyClasses: true,
  verticalPosition: 'top'
});
  • .sticky-element — селектор элемента, который необходимо закрепить.
  • stickyBitStickyClass — класс, добавляемый элементу при активации «липкости».
  • useStickyClasses — позволяет управлять стилями через CSS-классы.
  • verticalPosition — положение относительно viewport (top или bottom).

Инициализация возвращает объект, который и является API для дальнейшего управления.

Методы API

1. .update() Обновляет состояние липкого элемента. Необходим, если контент страницы динамически изменяется, например, при добавлении новых блоков выше элемента:

sticky.update();

После вызова .update() Stickybits пересчитывает позиции и корректно закрепляет элемент.

2. .destroy() Полностью отключает Stickybits для выбранного элемента, удаляя все классы и внутренние события:

sticky.destroy();

destroy() полезен при динамическом изменении макета страницы или при удалении элемента из DOM.

3. .cleanup() Удаляет только добавленные классы, оставляя обработчики событий:

sticky.cleanup();

Разница с .destroy() в том, что cleanup() не уничтожает экземпляр, а только визуально откатывает изменения.

4. .toggle(state) Позволяет программно включить или выключить липкость. Принимает булево значение:

sticky.toggle(true);  // включить
sticky.toggle(false); // отключить

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

Работа с коллекциями элементов

Stickybits позволяет работать не только с одним элементом, но и с коллекцией. Например:

const stickies = stickybits('.sticky-item');

В этом случае возвращается массив объектов с API для каждого элемента:

stickies.forEach(sticky => sticky.update());

Каждый объект в коллекции обладает тем же набором методов (update, destroy, cleanup, toggle).

Динамическое изменение опций

Некоторые свойства можно изменять после инициализации. Например, изменение позиции:

sticky.props.verticalPosition = 'bottom';
sticky.update();

Также можно добавлять кастомные классы:

sticky.props.stickyBitStickyClass = 'custom-sticky';
sticky.update();

Важно всегда вызывать update() после изменения свойств, чтобы новые параметры вступили в силу.

Поддержка событий и колбэков

Stickybits позволяет отслеживать состояние элемента через пользовательские события. Например, можно слушать появление класса is-sticky:

const element = document.querySelector('.sticky-element');
element.addEventListener('stickybit:statechange', (event) => {
  console.log('Состояние изменилось:', event.detail.isSticky);
});

Событие stickybit:statechange передаёт объект с ключами:

  • isSticky — булево значение состояния элемента.
  • distanceFromTop — расстояние элемента от верхней границы viewport.

Это даёт возможность интегрировать липкие элементы с другими компонентами интерфейса.

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

  • Использовать update() только при необходимости, так как частые вызовы при скролле могут влиять на производительность.
  • Для большого количества элементов предпочтительно работать с коллекциями и обновлять их пакетно.
  • При удалении элемента всегда вызывать destroy() для предотвращения утечек памяти.

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

Динамическое включение липкости при скролле:

const sticky = stickybits('.header', { verticalPosition: 'top' });

window.addEventListener('scroll', () => {
  if (window.scrollY > 200) {
    sticky.toggle(true);
  } else {
    sticky.toggle(false);
  }
});

Обновление позиции после изменения DOM:

document.querySelector('#add-content').addEventListener('click', () => {
  const newBlock = document.createElement('div');
  newBlock.innerText = 'Новый блок';
  document.body.prepend(newBlock);
  sticky.update(); // пересчёт позиции липкого элемента
});

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

Оглавление