Динамическое включение/отключение

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

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

Для начала создаётся объект Stickybits с выборкой элементов, которым необходимо применить поведение sticky:

import Stickybits from 'stickybits';

const stickyInstance = Stickybits('.js-sticky', {
  useStickyClasses: true,
  stickyBitStickyOffset: 0,
});

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

  • useStickyClasses — включает автоматическое добавление классов .is-sticky и .is-stuck.
  • stickyBitStickyOffset — задаёт отступ от верхней границы окна при активации липкости.
  • noStyles — если true, библиотека не будет добавлять встроенные стили для позиционирования.

Инициализация возвращает объект, через который можно управлять состоянием sticky элементов.

Метод update() для динамического изменения

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

window.addEventListener('resize', () => {
  stickyInstance.update();
});
  • update() не создаёт новый объект, а работает с уже инициализированными элементами.
  • Пересчитывает offset и высоту контейнера для корректного применения позиции fixed.

Полное отключение Stickybits

Для динамического отключения sticky поведения используется метод destroy(). Он возвращает элементы в исходное состояние, удаляя все добавленные классы и встроенные стили:

stickyInstance.destroy();

Особенности работы destroy():

  • Убираются классы .is-sticky и .is-stuck.
  • Сбрасываются inline-стили, добавленные для фиксации позиции.
  • События прокрутки и resize, привязанные библиотекой, снимаются.

Это позволяет временно деактивировать sticky элементы без удаления их из DOM.

Условное включение и отключение

В реальных интерфейсах часто требуется активировать липкость только при определённых условиях, например, на больших экранах или при прокрутке определённой секции:

function handleSticky() {
  if (window.innerWidth > 1024) {
    if (!stickyInstance.enabled) {
      stickyInstance = Stickybits('.js-sticky', { useStickyClasses: true });
    }
  } else {
    if (stickyInstance.enabled) {
      stickyInstance.destroy();
    }
  }
}

window.addEventListener('resize', handleSticky);
handleSticky();

Разбор логики:

  • Проверяется ширина окна, чтобы включить sticky только на десктопах.
  • Используется свойство enabled (или внутреннее хранение состояния), чтобы не создавать несколько экземпляров Stickybits.
  • Метод destroy() безопасно возвращает элементы в исходное состояние.

Динамическая смена настроек

Stickybits не поддерживает прямое изменение параметров после инициализации, поэтому для изменения stickyBitStickyOffset или useStickyClasses нужно выполнить destroy и заново инициализировать:

stickyInstance.destroy();

stickyInstance = Stickybits('.js-sticky', {
  stickyBitStickyOffset: 20,
  useStickyClasses: true,
});

Это позволяет динамически адаптировать поведение элементов в зависимости от контекста или пользовательских действий.

Работа с несколькими экземплярами

Для сложных интерфейсов с несколькими sticky блоками можно создавать отдельные экземпляры:

const headerSticky = Stickybits('.js-header', { stickyBitStickyOffset: 0 });
const sidebarSticky = Stickybits('.js-sidebar', { stickyBitStickyOffset: 10 });

// Временное отключение боковой панели
sidebarSticky.destroy();
  • Каждый экземпляр управляет своим набором элементов.
  • Методы update() и destroy() применяются только к конкретному объекту, что предотвращает конфликты.

Практические рекомендации

  • Использовать update() после динамического изменения DOM или размеров элементов.
  • Включать sticky поведение только тогда, когда это необходимо, чтобы минимизировать нагрузку на рендеринг.
  • Использовать destroy() при скрытии или удалении элементов с липким поведением.
  • Для условного включения хранить ссылку на экземпляр Stickybits и проверять его состояние перед повторной инициализацией.

Динамическое управление Stickybits обеспечивает гибкость интерфейса и позволяет адаптировать липкие элементы под различные устройства и сценарии использования. Оно строится на сочетании методов update() и destroy() с проверкой условий и пересозданием экземпляров при необходимости.

Оглавление