Полный список доступных опций

Библиотека Stickybits принимает объект настроек вторым аргументом при инициализации:

stickybits('.element', {
  optionName: value
})

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

useStickyClasses

Тип: boolean По умолчанию: false

Включает автоматическое добавление CSS-классов в зависимости от состояния элемента.

При активации добавляются следующие классы:

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

Пример:

stickybits('.sidebar', {
  useStickyClasses: true
})

Это позволяет полностью управлять внешним видом через CSS без необходимости писать JavaScript-обработчики.

stickyBitStickyOffset

Тип: number По умолчанию: 0

Задаёт отступ сверху (в пикселях), при котором элемент начнёт «прилипать».

Пример:

stickybits('.header', {
  stickyBitStickyOffset: 20
})

Элемент начнёт фиксироваться не у самого верха, а с отступом 20px.

verticalPosition

Тип: string Значения: 'top' | 'bottom' По умолчанию: 'top'

Определяет, к какой стороне контейнера привязывается элемент.

  • 'top' — стандартное поведение (прилипание сверху)
  • 'bottom' — прилипание к нижней границе

Пример:

stickybits('.footer-widget', {
  verticalPosition: 'bottom'
})

Используется редко, но полезно для элементов, которые должны «прилипать» снизу.

noStyles

Тип: boolean По умолчанию: false

Отключает автоматическое применение встроенных стилей.

По умолчанию Stickybits добавляет inline-стили:

  • position: fixed
  • top или bottom

При включении noStyles: true вся ответственность за стили ложится на CSS.

stickybits('.element', {
  noStyles: true
})

Актуально при строгом контроле над стилями или использовании CSS-in-JS.

stickyClass

Тип: string По умолчанию: 'js-is-sticky'

Позволяет задать собственное имя класса для состояния «прилип».

stickybits('.block', {
  useStickyClasses: true,
  stickyClass: 'is-fixed'
})

stuckClass

Тип: string По умолчанию: 'js-is-stuck'

Класс, добавляемый при достижении нижней границы контейнера.

stickybits('.block', {
  useStickyClasses: true,
  stuckClass: 'is-stuck-bottom'
})

stickyChangeClass

Тип: string По умолчанию: 'js-is-sticky--change'

Класс для промежуточного состояния — используется, когда элемент меняет своё положение.

stickybits('.block', {
  useStickyClasses: true,
  stickyChangeClass: 'is-changing'
})

parentClass

Тип: string По умолчанию: 'js-stickybit-parent'

Добавляется к родительскому контейнеру, внутри которого работает Stickybits.

stickybits('.block', {
  parentClass: 'sticky-container'
})

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

scrollEl

Тип: HTMLElement По умолчанию: window

Указывает элемент, внутри которого отслеживается прокрутка.

const scrollContainer = document.querySelector('.scroll-area')

stickybits('.item', {
  scrollEl: scrollContainer
})

Используется при кастомных скролл-контейнерах (например, overflow: auto).

positionVal

Тип: string Значения: 'fixed' | 'absolute' По умолчанию: 'fixed'

Определяет, какое CSS-свойство position будет применяться при «прилипании».

stickybits('.element', {
  positionVal: 'absolute'
})

absolute может использоваться для более точного контроля внутри контейнера.

useFixed

Тип: boolean По умолчанию: true

Принудительно включает или отключает использование position: fixed.

stickybits('.element', {
  useFixed: false
})

Полезно для:

  • тестирования
  • обхода багов старых браузеров

customStickyChangeNumber

Тип: number По умолчанию: null

Позволяет задать кастомную точку (в пикселях), при которой применяется класс изменения (stickyChangeClass).

stickybits('.element', {
  useStickyClasses: true,
  customStickyChangeNumber: 100
})

Даёт возможность управлять моментом визуального изменения элемента.

applyStyle

Тип: function По умолчанию: внутренняя функция библиотеки

Позволяет переопределить механизм применения стилей.

stickybits('.element', {
  applyStyle: (item, state) => {
    if (state === 'sticky') {
      item.el.style.background = 'red'
    }
  }
})

Аргументы функции:

  • item — объект Stickybits
  • state — текущее состояние (default, sticky, stuck)

Используется для глубокой кастомизации поведения.

getComputedStyle

Тип: function По умолчанию: window.getComputedStyle

Позволяет заменить стандартный способ получения вычисленных стилей.

stickybits('.element', {
  getComputedStyle: (el) => customStyleGetter(el)
})

Редко используется, но может быть полезно в специфических окружениях (например, SSR или тестирование).

useGetBoundingClientRect

Тип: boolean По умолчанию: false

Включает использование getBoundingClientRect вместо стандартных вычислений.

stickybits('.element', {
  useGetBoundingClientRect: true
})

Полезно при сложных вложенных layout’ах, где обычные расчёты дают неточные результаты.

transform

Тип: boolean По умолчанию: false

Определяет, учитывать ли CSS transform при вычислении позиции.

stickybits('.element', {
  transform: true
})

Важно при использовании:

  • transform: translate
  • анимаций
  • 3D-преобразований

Комбинирование опций

Stickybits допускает одновременное использование нескольких параметров:

stickybits('.sidebar', {
  useStickyClasses: true,
  stickyBitStickyOffset: 30,
  scrollEl: document.querySelector('.container'),
  verticalPosition: 'top',
  noStyles: false
})

Гибкость конфигурации позволяет:

  • адаптировать поведение под любой layout
  • работать с кастомными контейнерами
  • полностью контролировать визуальное состояние через CSS или JS
Оглавление