Автоматические CSS-классы

Stickybits — это лёгкая JavaScript-библиотека, предназначенная для управления «липкими» элементами на странице. Одной из ключевых возможностей является автоматическое присвоение CSS-классов в зависимости от состояния элемента: закреплён, освобождён или достигнут предел контейнера. Эти классы позволяют реализовать гибкие стили без ручного контроля через события scroll.

Основные CSS-классы

Stickybits автоматически добавляет несколько стандартных классов к элементу и его контейнеру:

  • stickybits-sticky — присваивается элементу в момент, когда он закрепляется на странице и остаётся видимым при прокрутке.
  • stickybits-bottom — появляется, когда элемент достигает нижней границы своего контейнера и больше не может оставаться «липким».
  • stickybits-top — элемент вернулся в исходное положение, до начала действия «липкости».
  • js-is-sticky — универсальный вспомогательный класс, указывающий, что элемент контролируется Stickybits.

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

Настройка классов через опции

При инициализации Stickybits возможно настроить собственные классы для состояний с помощью объекта опций:

stickybits('.my-element', {
  stickyClass: 'my-sticky',
  stuckClass: 'my-bottom',
  useStickyClasses: true
});
  • stickyClass — задаёт имя класса, применяемого к закреплённому элементу.
  • stuckClass — имя класса, присваиваемого элементу при достижении нижней границы контейнера.
  • useStickyClasses — логическое значение, включающее или отключающее автоматическое добавление классов.

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

Динамическое добавление и удаление классов

Stickybits обновляет классы при каждой прокрутке страницы. Алгоритм работает следующим образом:

  1. Вычисляется положение элемента относительно верхней границы окна (offsetTop).
  2. Проверяется, достиг ли элемент границы контейнера.
  3. В зависимости от результата добавляется или удаляется класс stickyClass или stuckClass.

Такой подход позволяет создавать адаптивные интерфейсы без дополнительных слушателей событий scroll.

Применение классов для анимации

Автоматические CSS-классы можно использовать для анимации изменений состояния. Например, плавное появление тени при закреплении элемента:

.my-sticky {
  transition: box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.my-bottom {
  opacity: 0.8;
  transform: translateY(2px);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

В этом примере при закреплении элемента появляется тень, а при достижении низа контейнера элемент слегка смещается и меняет прозрачность.

Комбинирование классов с медиазапросами

Stickybits автоматически применяет классы на всех разрешениях, но их можно комбинировать с медиазапросами для адаптивного поведения:

@media (max-width: 768px) {
  .my-sticky {
    box-shadow: none;
    position: static;
  }
}

Таким образом, на мобильных устройствах элементы могут вести себя иначе, но при этом сохраняется логика автоматического присвоения классов.

Использование пользовательских событий

Хотя Stickybits в первую очередь ориентирован на CSS-классы, можно реагировать на изменения состояния элемента через пользовательские события:

document.querySelector('.my-element').addEventListener('stickybit:stuck', () => {
  console.log('Элемент закреплён');
});

document.querySelector('.my-element').addEventListener('stickybit:unstuck', () => {
  console.log('Элемент откреплён');
});

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

Советы по использованию классов

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

Автоматические CSS-классы Stickybits создают мощный инструмент для стилизации и управления поведением «липких» элементов, позволяя полностью отделить визуальные эффекты от логики JavaScript.

Оглавление