Метод cleanup

Метод cleanup является ключевым инструментом для управления поведением элементов, закреплённых с помощью библиотеки Stickybits. Он позволяет корректно удалить все эффекты sticky-позиционирования и восстановить исходное состояние элементов на странице. Этот метод особенно полезен при динамическом изменении контента, изменении размеров окна или удалении элементов из DOM.

Синтаксис

stickyInstance.cleanup();
  • stickyInstance — объект, возвращённый вызовом stickybits() на элементе или наборе элементов.

Метод не принимает аргументов и применяется напрямую к экземпляру Stickybits.

Принцип работы

При вызове cleanup выполняется последовательность действий:

  1. Удаление inline-стилей Stickybits добавляет элементам и их контейнерам определённые inline-стили (position, top, width, left). Метод cleanup сбрасывает все эти свойства, возвращая элементы к их исходному CSS-состоянию.

  2. Удаление классов Для управления состояниями элементов Stickybits использует CSS-классы:

    • .js-is-sticky — активное состояние закреплённого элемента
    • .js-is-stuck — элемент достиг нижней границы контейнера
    • .js-is-top — элемент находится в исходной позиции

    Метод cleanup удаляет все эти классы, чтобы DOM не содержал лишних индикаторов состояния.

  3. Удаление слушателей событий Stickybits устанавливает слушатели scroll и resize, чтобы динамически изменять положение элементов. cleanup полностью снимает эти обработчики, предотвращая лишние вычисления и утечки памяти.

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

// Инициализация sticky элементов
const stickyInstance = stickybits('.sticky-element', {
  stickyBitStickyOffset: 20,
  useStickyClasses: true
});

// Позднее, когда элемент нужно вернуть в исходное состояние
stickyInstance.cleanup();

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

Важные нюансы

  • Множественные элементы Если Stickybits инициализирован на наборе элементов, cleanup корректно обработает каждый элемент индивидуально, удаляя стили и классы.

  • Повторная инициализация После вызова cleanup можно снова вызвать stickybits() на том же элементе, чтобы повторно активировать sticky-функциональность. Это удобно при динамическом контенте или SPA-приложениях.

  • Совместимость с другими библиотеками Метод cleanup безопасен для использования вместе с фреймворками типа React или Vue, так как корректно убирает все слушатели и стили, предотвращая конфликты с системой виртуального DOM.

Полезные приёмы

  1. Динамическое удаление sticky элементов
const elements = stickybits('.dynamic-sticky');
elements.forEach(el => el.cleanup());
  1. Обработка изменения контента

При изменении высоты контейнера можно вызвать cleanup, затем повторно инициализировать sticky, чтобы пересчитать положение:

stickyInstance.cleanup();
stickybits('.sticky-element');
  1. Оптимизация производительности

Удаление ненужных sticky-элементов с помощью cleanup снижает нагрузку на обработчики событий scroll и resize, что важно при больших страницах с множеством фиксированных блоков.

Метод cleanup обеспечивает полное и безопасное удаление функционала Stickybits, делая управление sticky-элементами гибким и предсказуемым. Его использование — стандартная практика при динамическом управлении интерфейсом.

Оглавление