Координация нескольких экземпляров

Stickybits — это лёгкая библиотека для управления «липким» поведением элементов на странице. Когда на странице присутствует несколько элементов, которые должны вести себя независимо друг от друга, важно корректно организовать создание и управление несколькими экземплярами Stickybits.

Каждый экземпляр Stickybits создаётся через функцию stickybits(target, options), где:

  • target — CSS-селектор или DOM-элемент;

  • options — объект с настройками, включая:

    • useStickyClasses (boolean) — добавление CSS-классов при активации липкого поведения;
    • stickyBitStickyOffset (number) — смещение от верхнего края окна;
    • stickyBitScrollContainer (DOM) — контейнер для скролла.

Создание нескольких экземпляров не конфликтует между собой, если каждому передан собственный target. Например:

const stickyHeader = stickybits('.header', { useStickyClasses: true });
const stickySidebar = stickybits('.sidebar', { useStickyClasses: true, stickyBitStickyOffset: 20 });

В этом примере .header и .sidebar будут вести себя независимо, применяя свои настройки.

Управление коллекцией элементов через один вызов

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

const stickyItems = stickybits('.sticky-item', { useStickyClasses: true });

  • stickyItems будет массивом объектов, каждый из которых управляет своим DOM-элементом.

  • Каждый объект включает методы:

    • .cleanup() — отключение sticky для конкретного элемента;
    • .update() — обновление позиции и состояния липкости.

Важно помнить, что вызов cleanup на одном объекте не затрагивает остальные элементы, даже если они были созданы одной командой.

Координация поведения нескольких элементов

Если несколько липких элементов находятся на одной странице и потенциально могут пересекаться, рекомендуется контролировать их offset и порядок отрисовки:

  1. Задавать уникальный stickyBitStickyOffset для каждого элемента, чтобы элементы не перекрывали друг друга при скролле.
  2. Использовать z-index через CSS для корректного наложения.
  3. При динамическом изменении контента — вызывать .update() для соответствующих экземпляров:
stickyItems.forEach(item => item.update());

Это особенно важно для страниц с ленивой загрузкой контента или изменением размеров элементов.

Очистка и повторная инициализация

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

stickyItems.forEach(item => item.cleanup());
stickyItems = stickybits('.sticky-item', { useStickyClasses: true });
  • Метод .cleanup() удаляет все внутренние слушатели событий и CSS-классы, связанные с конкретным экземпляром.
  • Повторная инициализация гарантирует, что новые элементы также станут липкими.

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

  • Каждому элементу — свой экземпляр, если требуется индивидуальное управление.
  • Массивные вызовы через селектор оптимальны для однородных элементов с одинаковыми настройками.
  • Обновление позиций (.update()) необходимо при изменении DOM или размеров окна.
  • Очистка старых экземпляров предотвращает утечки памяти и конфликты событий.

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

Пример комплексной координации

// Инициализация разных элементов
const stickyHeader = stickybits('.header', { stickyBitStickyOffset: 0 });
const stickySidebar = stickybits('.sidebar', { stickyBitStickyOffset: 50 });
const stickyAds = stickybits('.ad-banner', { stickyBitStickyOffset: 100 });

// Обновление всех элементов при изменении размеров
window.addEventListener('resize', () => {
  [stickyHeader, stickySidebar, stickyAds].forEach(instance => instance.update());
});

// Очистка при удалении элементов
document.querySelectorAll('.ad-banner').forEach(ad => {
  ad.remove();
});
stickyAds.forEach(instance => instance.cleanup());

В этом примере каждый блок управляется независимо, с корректными offset, обновлениями и очисткой, что обеспечивает стабильное и предсказуемое поведение всей страницы.

Оглавление