Изменения в API между версиями

Библиотека Stickybits предназначена для упрощения работы с “липкими” элементами на странице, однако с течением времени её API претерпело ряд изменений, влияющих на интеграцию и поведение компонентов. Ниже подробно рассматриваются ключевые изменения между основными версиями.

Инициализация и конфигурация

В ранних версиях Stickybits (до версии 3.x) инициализация выполнялась через простую функцию с передачей селектора и объектом опций:

var sticky = new Stickybits('.element', { useStickyClasses: true });

Ключевые особенности старого API:

  • useStickyClasses: добавление CSS-классов .is-sticky и .is-stuck.
  • Автоматическое определение поддержки position: sticky в браузере.
  • Метод update() не был частью публичного API, для обновления положения приходилось переинициализировать объект.

В версии 3.x и выше произошли следующие изменения:

  • Конструктор теперь может принимать массив элементов, а не только селектор.
  • Добавлен параметр stickyBitStickyOffset для точной настройки смещения липкого элемента.
  • useStickyClasses остался, но появилась возможность управлять индивидуальными классами через stickyClass и stuckClass.

Пример нового API:

var sticky = Stickybits('.element', {
  stickyBitStickyOffset: 20,
  stickyClass: 'custom-sticky',
  stuckClass: 'custom-stuck'
});

Методы управления элементами

Ранее доступные методы:

  • cleanup(): удалял все добавленные классы и слушатели событий.
  • update(): отсутствовал или был доступен только через внутренние вызовы.

Изменения в новых версиях:

  • update(): стал официальным методом API для пересчёта позиции при изменении DOM.
  • destroy(): аналог cleanup(), но более надёжно снимает все обработчики и возвращает элемент в исходное состояние.
  • getStickybitsData(element): возвращает объект с текущими параметрами элемента (el, parent, state), что облегчает интеграцию с другими скриптами.
sticky.update(); // пересчет позиции всех элементов
sticky.destroy(); // удаление всех эффектов
console.log(sticky.getStickybitsData(document.querySelector('.element')));

Управление классами

В старых версиях классы были жёстко закреплены:

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

В новой версии:

  • Классы можно задавать через опции stickyClass и stuckClass.
  • Добавлена поддержка кастомных префиксов через useFixedClasses и classNamePrefix.
  • Классы применяются не только через position: sticky, но и через fallback с position: fixed при отсутствии поддержки браузером.

Пример:

var sticky = Stickybits('.element', {
  stickyClass: 'my-sticky',
  stuckClass: 'my-stuck',
  useFixedClasses: true
});

Поведение в разных браузерах

Ранее Stickybits использовала проверку position: sticky и автоматически переключалась на position: fixed в неподдерживаемых браузерах. Недостатком было отсутствие точного контроля над этим поведением.

Новые версии добавили:

  • Параметр noStyles для отключения встроенных стилей.
  • Поддержка динамического пересчета при изменении размера окна через update().
  • Возможность использовать полифилы или кастомные fallback-стили через события API.

Особенности работы с динамическим контентом

В версии 2.x и ниже добавление новых элементов после инициализации требовало повторного вызова Stickybits(selector).

В версии 3.x+:

  • update() корректно обрабатывает динамически добавленные элементы.
  • Можно передавать массив новых элементов напрямую:
var newSticky = document.querySelectorAll('.new-element');
sticky.update(newSticky);

Сравнение старого и нового API

Функция / опция Старое API (v2.x) Новое API (v3.x+)
Инициализация new Stickybits(selector) Stickybits(selector, options)
Классы Жёстко .is-sticky, .is-stuck Настраиваемые через stickyClass, stuckClass
Методы управления cleanup() update(), destroy(), getStickybitsData()
Смещение Только через CSS Опция stickyBitStickyOffset
Поддержка динамики Перезапуск инициализации update(newElements)
Позиционирование fallback Автоматическое Можно настроить через useFixedClasses и события

Практические советы при переходе между версиями

  1. Проверка существующего кода: элементы с привязкой к .is-sticky или .is-stuck нужно обновить на новые классы, если используется кастомизация.
  2. Использование методов API: заменить ручные пересчёты на update() для стабильного поведения при изменении DOM.
  3. Смещение элементов: учитывать новую опцию stickyBitStickyOffset вместо CSS top, если требуется динамическое управление.
  4. Удаление элементов: вместо старого cleanup() применять destroy() для полного снятия стилей и слушателей.
  5. Динамический контент: обязательно вызывать update(newElements) после добавления новых “липких” блоков на страницу.

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

Оглавление