Класс js-is-stuck

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

Использование js-is-stuck позволяет:

  • Изменять стили закрепленного элемента через CSS, например, менять фон, тень или границы.
  • Определять поведение элемента через JavaScript в зависимости от его состояния (закреплен/не закреплен).
  • Создавать адаптивные интерфейсы с динамическими эффектами при прокрутке.

Механизм добавления класса

При инициализации Stickybits элементу назначается слушатель события scroll. Библиотека отслеживает позицию элемента относительно верхнего края окна и его контейнера. Когда элемент достигает порогового значения (обычно это верхний край окна или заданное смещение), выполняются следующие действия:

  1. Элементу добавляется класс js-is-stuck.

  2. Если включена опция useStickyClasses, библиотека добавляет дополнительные классы для состояния:

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

  3. При прокрутке назад класс автоматически удаляется, если элемент возвращается в исходное положение.

Стилизация через CSS

Класс js-is-stuck предназначен для простого и интуитивного управления стилями. Примеры типичного использования:

.sticky-element {
  transition: all 0.3s ease;
}

.sticky-element.js-is-stuck {
  background-color: #f5f5f5;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Важно учитывать:

  • Переходы (transition) делают изменение состояния более плавным.
  • Можно комбинировать с псевдоклассами для дополнительных эффектов при закреплении.

Программное взаимодействие

Для динамической логики часто используют слушатели событий или проверку класса через Jav * aScript:

const stickyEl = document.querySelector('.sticky-element');

window.addEventListener('scroll', () => {
  if (stickyEl.classList.contains('js-is-stuck')) {
    console.log('Элемент закреплен');
  } else {
    console.log('Элемент свободен');
  }
});

Такой подход позволяет:

  • Управлять анимациями, которые не могут быть реализованы только через CSS.
  • Синхронизировать поведение нескольких элементов на странице.
  • Реализовать сложные UI-паттерны, например, закрепленные заголовки с изменением цвета при скролле.

Опции Stickybits, влияющие на js-is-stuck

  1. useStickyClasses (true/false) — включает добавление классов состояния. Если отключено, js-is-stuck не будет применяться.
  2. stickyBitStickyOffset — задает смещение от верхнего края окна, при котором элемент считается закрепленным.
  3. stuckClass — позволяет переопределить имя класса, которое будет добавляться вместо js-is-stuck.
  4. parentClass — добавляет класс к контейнеру элемента, что полезно для управления стилями при прокрутке.

Пример инициализации с пользовательскими параметрами:

stickybits('.sticky-element', {
  useStickyClasses: true,
  stickyBitStickyOffset: 10,
  stuckClass: 'custom-stuck-class'
});

Особенности поведения

  • Класс js-is-stuck всегда обновляется при изменении позиции элемента, включая ресайз окна.
  • В мобильных браузерах Stickybits корректно добавляет класс при динамическом изменении высоты элементов и виртуальной клавиатуре.
  • При наличии нескольких закрепленных элементов внутри одного контейнера библиотека корректно обрабатывает перекрытия, назначая js-is-stuck только тем элементам, которые реально закреплены.

Практические советы

  • Всегда включать useStickyClasses, если требуется визуальная обратная связь при закреплении элемента.
  • Использовать transition для всех свойств, которые изменяются при добавлении класса.
  • Для сложных интерфейсов стоит проверять наличие класса через JavaScript, чтобы реализовать условные сценарии поведения.
  • При необходимости изменить стандартное имя класса использовать опцию stuckClass для поддержания читаемости кода и согласованности CSS.

Класс js-is-stuck является центральным механизмом библиотеки Stickybits, который связывает логику закрепления элемента с визуальными и функциональными изменениями, обеспечивая удобный и гибкий способ управления «липкими» элементами на странице.

Оглавление