Константы и перечисления

Библиотека Stickybits предоставляет разработчикам удобный способ управления элементами с липким позиционированием (sticky) на веб-странице. Основная сила Stickybits заключается в возможности легко настраивать поведение элементов при скролле, при этом скрывая сложности работы с нативным CSS position: sticky и совместимостью браузеров. Центральным элементом управления поведением являются константы и перечисления, которые задают ключевые параметры и режимы работы библиотеки.

Основные константы

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

  1. POSITION_STICKY Значение: "sticky" Используется для активации CSS-позиционирования sticky. Это основная константа, на которую опирается библиотека, чтобы определить, будет ли элемент «липким» при скролле.

  2. POSITION_FIXED Значение: "fixed" Используется в случае, когда браузер не поддерживает sticky или необходимо закрепить элемент в определённой позиции относительно окна. Stickybits автоматически переключается на эту константу при необходимости fallback-позиционирования.

  3. DEFAULT_STICKY_CLASS Значение: "js-is-sticky" Класс, который библиотека применяет к элементу, когда тот становится липким. Позволяет стилизовать состояние sticky через CSS, отдельно от стандартного класса элемента.

  4. DEFAULT_STICKY_BOTTOM_CLASS Значение: "js-is-sticky-bottom" Класс, который применяется, когда элемент достигает нижней границы контейнера и больше не может оставаться «липким».

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

Перечисления режимов Stickybits

Stickybits поддерживает несколько режимов работы, которые определяются перечислением опций (options) при инициализации:

var sticky = new Stickybits('.my-element', {
  stickyBitStickyOffset: 20,
  useFixed: false,
  verticalPosition: 'top',
  useStickyClasses: true
});

Ключевые параметры перечислений:

  1. useFixed

    • Тип: boolean
    • Значение по умолчанию: false
    • Определяет, следует ли использовать позиционирование fixed вместо sticky. Если true, Stickybits применяет константу POSITION_FIXED для элемента.

  2. verticalPosition

    • Тип: string
    • Возможные значения: "top" или "bottom"
    • Определяет вертикальную ориентацию липкого элемента. Значение "top" фиксирует элемент сверху контейнера, "bottom" — снизу. Используется вместе с CSS-свойствами top или bottom.

  3. stickyBitStickyOffset

    • Тип: number
    • Задаёт смещение от верхнего края окна (или контейнера, если используется bottom) в пикселях.
    • Позволяет реализовать эффект «липкого» элемента с отступом от верхней границы страницы.

  4. useStickyClasses

    • Тип: boolean
    • Включает или отключает автоматическое применение классов DEFAULT_STICKY_CLASS и DEFAULT_STICKY_BOTTOM_CLASS.

Управление состояниями через перечисления

Stickybits автоматически переключает состояния элементов, используя внутренние перечисления:

  • STATE_DEFAULT – элемент в исходной позиции, ещё не активен как sticky.
  • STATE_STICKY – элемент стал липким, применяется класс js-is-sticky.
  • STATE_BOTTOM – элемент достиг нижней границы контейнера, применяется класс js-is-sticky-bottom.

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

sticky.addEventListener('stateChange', function(event) {
  if (event.detail.state === 'STATE_BOTTOM') {
    console.log('Элемент достиг нижней границы');
  }
});

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

Библиотека позволяет комбинировать константы, перечисления состояния и пользовательские опции, чтобы добиться гибкого поведения:

  • Элемент может быть sticky только сверху с отступом 50px:

    new Stickybits('.header', { stickyBitStickyOffset: 50, verticalPosition: 'top' });

  • Элемент может использовать fallback на fixed и управлять состояниями через CSS-классы:

    new Stickybits('.sidebar', { useFixed: true, useStickyClasses: true });

  • Состояния STATE_STICKY и STATE_BOTTOM позволяют добавлять дополнительные анимации при переходе в липкий режим или при достижении нижней границы контейнера.

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

  • Использовать константы для согласованности: всегда опираться на встроенные значения (POSITION_STICKY, POSITION_FIXED) вместо собственных строковых литералов.
  • Вертикальная ориентация через перечисления (verticalPosition) облегчает поддержку разных макетов страницы.
  • Классы состояния (js-is-sticky, js-is-sticky-bottom) позволяют реализовать плавные переходы и эффекты с помощью CSS без изменения JavaScript-кода.
  • Смещение через stickyBitStickyOffset предотвращает наложение на шапки сайта или панели навигации.

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

Оглавление