Полный список методов

Библиотека Stickybits предоставляет лёгкий способ сделать элементы веб-страницы «липкими» при прокрутке. Для работы с элементом используется метод stickybits(). Его базовая форма выглядит так:

const sticky = stickybits('.selector', {
  stickyBitStickyOffset: 0,
  useStickyClasses: true,
  useFixed: false
});
  • .selector – CSS-селектор элемента, который нужно сделать липким.
  • stickyBitStickyOffset – смещение от верха страницы в пикселях, после которого элемент становится липким.
  • useStickyClasses – добавление CSS-классов для управления состояниями элемента (is-sticky, is-stuck).
  • useFixed – если true, используется фиксированное позиционирование вместо CSS position: sticky.

Метод возвращает объект с набором методов, позволяющих управлять элементом динамически.

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

update()

Обновляет внутренние вычисления Stickybits, пересчитывает положение элемента. Полезно при изменении контента страницы или размеров элементов.

sticky.update();

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

  • Не требует аргументов.
  • Пересчитывает высоту родителя и точку прилипания.
  • Автоматически обновляет классы состояния.

cleanup()

Удаляет все стили и классы, добавленные Stickybits, возвращая элемент к исходному состоянию.

sticky.cleanup();

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

  • Убирает position: sticky или position: fixed, применённые через библиотеку.
  • Удаляет CSS-классы is-sticky и is-stuck.
  • Полезно для динамически создаваемых интерфейсов, когда элемент больше не должен быть липким.

stickyClass()

Добавляет CSS-классы при прилипания элемента. Этот метод вызывается автоматически при инициализации, если включен useStickyClasses.

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

sticky.stickyClass();

Классы:

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

Можно переопределять поведение через собственные CSS.

positionSticky()

Устанавливает элементу position: sticky с соответствующим смещением.

sticky.positionSticky();

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

  • Применяется только если useFixed: false.
  • Использует свойство top, равное stickyBitStickyOffset.
  • Обновляет классы состояния элемента.

positionFixed()

Используется, когда элемент должен «прилипать» с помощью position: fixed.

sticky.positionFixed();

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

  • Применяется только если useFixed: true.
  • Фиксирует элемент относительно окна браузера.
  • Работает совместно с update() для корректного положения при динамическом изменении страницы.

setStickyPosition(value)

Позволяет динамически изменять позицию прилипания в пикселях.

sticky.setStickyPosition(50);
  • value – число пикселей от верхнего края окна.
  • Пересчитывает точку прилипания без необходимости вызова cleanup() или повторной инициализации.
  • Удобно для адаптивного дизайна, когда требуется смещение при определённых разрешениях экрана.

addStateClass(element, state)

Позволяет вручную управлять CSS-классами состояния элемента.

sticky.addStateClass(myElement, 'is-stuck');
  • element – DOM-элемент, к которому применяется класс.
  • state – имя класса (is-sticky или is-stuck).
  • Можно комбинировать с кастомными стилями.

removeStateClass(element, state)

Удаляет заданный класс состояния с элемента.

sticky.removeStateClass(myElement, 'is-sticky');
  • Аналогично addStateClass, но выполняет обратное действие.
  • Полезно при условной логике отображения элементов на странице.

getState()

Возвращает текущий статус прилипания элемента:

const state = sticky.getState();
console.log(state); // 'default', 'is-sticky', 'is-stuck'
  • default – элемент не прилип.
  • is-sticky – элемент прилип к верху.
  • is-stuck – элемент достиг конца родителя.
  • Можно использовать для динамического изменения интерфейса через JavaScript.

Управление несколькими элементами

Stickybits поддерживает массив селекторов и NodeList:

const stickyMultiple = stickybits('.sticky-element');
stickyMultiple.forEach(sticky => {
  sticky.update();
});
  • Методы применяются к каждому элементу отдельно.
  • Позволяет создавать сложные интерфейсы с несколькими липкими блоками.

Интеграция с динамическими изменениями DOM

При добавлении или удалении элементов страницы можно:

  1. Вызвать update() для пересчёта размеров.
  2. Использовать cleanup() для удаления предыдущих стилей перед повторной инициализацией.
  3. Применять setStickyPosition() для адаптивного смещения.

Эти методы обеспечивают стабильное поведение Stickybits даже в динамическом контенте.

Оглавление