Методы экземпляра

Для работы с Stickybits необходимо создать экземпляр, связанный с DOM-элементами. Основной синтаксис выглядит следующим образом:

const sticky = stickybits('.selector', {
  useStickyClasses: true,
  stickyBitStickyOffset: 0,
  parentClass: 'sticky-parent',
});
  • .selector — CSS-селектор элементов, которым будет применяться «липкость».
  • useStickyClasses — логическое значение, определяющее, будут ли добавляться CSS-классы (is-sticky, has-stickybit).
  • stickyBitStickyOffset — смещение от верха страницы, после которого элемент становится «липким».
  • parentClass — класс, добавляемый родительскому элементу, если используется позиционирование sticky внутри контейнера.

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

Метод .update()

Метод .update() пересчитывает позиции и размеры «липких» элементов. Это особенно важно при динамическом изменении контента или размеров окна.

sticky.update();

Особенности:

  • Пересчитывает координаты top и bottom для каждого элемента.
  • Обновляет классы CSS при изменении положения.
  • Рекомендуется вызывать после добавления нового контента в родительский контейнер или изменения размеров элементов.

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

const container = document.querySelector('.container');
container.innerHTML += '<div class="sticky-item">Новый элемент</div>';
sticky.update();

Метод .disable()

Метод .disable() полностью отключает работу Stickybits для текущего экземпляра.

sticky.disable();

Особенности:

  • Убирает все CSS-классы, добавленные библиотекой.
  • Возвращает элементы в обычное поведение без «липкости».
  • Не удаляет сам экземпляр, его можно снова активировать с помощью .enable().

Пример:

sticky.disable(); // Элементы больше не «прилипают» при скролле

Метод .enable()

Метод .enable() восстанавливает работу Stickybits после отключения.

sticky.enable();

Особенности:

  • Снова делает элементы «липкими».
  • Повторно добавляет необходимые CSS-классы.
  • Пересчитывает позиции элементов.

Пример:

sticky.disable();
setTimeout(() => {
  sticky.enable(); // Повторная активация через 2 секунды
}, 2000);

Метод .destroy()

Метод .destroy() полностью удаляет экземпляр Stickybits и очищает все связанные с ним изменения.

sticky.destroy();

Особенности:

  • Убирает все CSS-классы.
  • Удаляет обработчики событий scroll и resize.
  • Делает элемент полностью независимым от Stickybits.
  • После вызова destroy() экземпляр больше нельзя использовать без повторного вызова stickybits().

Пример:

sticky.destroy();

Метод .addInstance()

Метод .addInstance() позволяет динамически добавить новые элементы в управление Stickybits после создания экземпляра.

sticky.addInstance(document.querySelector('.new-sticky'));

Особенности:

  • Позволяет «подключать» новые элементы без пересоздания экземпляра.
  • Обновляет внутренние структуры библиотеки.
  • Эквивалентно вызову update() для новых элементов.

Пример:

const newItem = document.createElement('div');
newItem.classList.add('sticky-item');
document.body.appendChild(newItem);
sticky.addInstance(newItem);

Метод .removeInstance()

Метод .removeInstance() удаляет один элемент из управления Stickybits без полного разрушения экземпляра.

sticky.removeInstance(document.querySelector('.sticky-item'));

Особенности:

  • Элемент теряет «липкость» и CSS-классы.
  • Остальные элементы экземпляра продолжают работать.
  • Полезно для динамически удаляемых или изменяемых элементов.

Пример:

const elementToRemove = document.querySelector('.sticky-item');
sticky.removeInstance(elementToRemove);

Итоговая схема методов экземпляра

Метод Описание
update() Пересчитывает позиции и размеры элементов.
disable() Отключает «липкость», оставляет экземпляр активным.
enable() Включает «липкость» после отключения.
destroy() Полностью удаляет экземпляр и очистку элементов.
addInstance(element) Добавляет новый элемент в управление Stickybits.
removeInstance(element) Удаляет отдельный элемент из управления Stickybits.

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

Оглавление