Опция useStickyClasses

Параметр useStickyClasses в библиотеке Stickybits отвечает за автоматическое управление CSS-классами в зависимости от текущего состояния «прилипающего» элемента. Эта опция позволяет отказаться от ручного отслеживания состояний и реализовать визуальные изменения через стили, а не через JavaScript.

По умолчанию Stickybits добавляет и удаляет классы, отражающие поведение элемента при прокрутке. Включение useStickyClasses делает это поведение явным и управляемым.

Основная идея

Stickybits отслеживает три ключевых состояния элемента:

  • элемент находится в исходной позиции
  • элемент «прилип» (sticky)
  • элемент достиг нижней границы контейнера и перестал быть липким

При активной опции useStickyClasses библиотека автоматически переключает CSS-классы, соответствующие этим состояниям.

Синтаксис подключения

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

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

Добавляемые CSS-классы

При использовании useStickyClasses Stickybits управляет следующими классами:

1. .js-is-sticky

Добавляется, когда элемент входит в состояние «липкого».

Условия:

  • пользователь прокрутил страницу до точки, где элемент должен зафиксироваться
  • элемент закреплён относительно viewport

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

.js-is-sticky {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

2. .js-is-stuck

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

Условия:

  • прокрутка достигла конца контейнера
  • элемент больше не может двигаться вниз

Пример:

.js-is-stuck {
  opacity: 0.7;
}

3. .js-is-sticky и .js-is-stuck вместе

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

Поведение без useStickyClasses

Если опция отключена:

  • Stickybits продолжает работать (позиционирование остаётся)
  • CSS-классы не добавляются
  • разработчику приходится вручную отслеживать состояние через колбэки или другие механизмы

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

Динамическое изменение внешнего вида

Sticky-состояние часто используется для изменения визуального восприятия интерфейса:

.header {
  transition: all 0.3s ease;
}

.header.js-is-sticky {
  background-color: white;
  height: 60px;
}

Анимации при «прилипании»

.sidebar {
  transform: translateY(0);
}

.sidebar.js-is-sticky {
  transform: translateY(10px);
}

Изменение поведения элементов управления

.button {
  position: relative;
}

.button.js-is-sticky {
  position: fixed;
  bottom: 20px;
}

Кастомизация классов

Stickybits позволяет изменить стандартные имена классов через дополнительные настройки:

stickybits('.element', {
  useStickyClasses: true,
  stickyClass: 'is-sticky',
  stuckClass: 'is-stuck'
});

Это удобно при использовании BEM или других методологий именования:

.block--sticky {
  border-bottom: 2px solid #000;
}

.block--stuck {
  opacity: 0.5;
}

Взаимодействие с CSS position: sticky

Stickybits может работать как полифилл для position: sticky, но при наличии нативной поддержки браузера:

  • позиционирование выполняется самим браузером
  • Stickybits отслеживает состояние и добавляет классы

Это делает useStickyClasses особенно полезным даже в современных браузерах.

Особенности производительности

Использование useStickyClasses:

  • не требует дополнительных вычислений сверх уже выполняемых Stickybits
  • минимально влияет на производительность
  • избавляет от необходимости писать обработчики scroll-событий вручную

Отладка состояний

Для диагностики поведения удобно временно добавить стили:

.js-is-sticky {
  outline: 2px solid green;
}

.js-is-stuck {
  outline: 2px solid red;
}

Это позволяет визуально отслеживать переходы между состояниями.

Частые ошибки

Отсутствие контейнера с ограниченной высотой

Если родительский контейнер не ограничивает высоту:

  • состояние .js-is-stuck никогда не наступает

Конфликт с пользовательскими классами

Если вручную добавляются классы с теми же именами:

  • возможны конфликты логики
  • рекомендуется использовать кастомные имена

Неправильная специфичность CSS

.element {
  background: blue;
}

.js-is-sticky {
  background: red;
}

Если .element имеет более высокий приоритет, изменения не применятся. Решение — повысить специфичность:

.element.js-is-sticky {
  background: red;
}

Комбинирование с другими опциями

useStickyClasses часто используется вместе с:

offset

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

stickybits('.element', {
  useStickyClasses: true,
  stickyBitStickyOffset: 20
});

verticalPosition

Управляет направлением:

stickybits('.element', {
  useStickyClasses: true,
  verticalPosition: 'bottom'
});

Расширенные сценарии

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

stickybits('.item', {
  useStickyClasses: true
});

Каждый элемент получает собственные классы независимо.

Интеграция с анимационными библиотеками

Классы можно использовать как триггеры:

.js-is-sticky {
  animation: fadeIn 0.3s ease;
}

Работа в сложных layout’ах

При вложенных контейнерах Stickybits корректно переключает классы, если:

  • правильно определён родительский элемент
  • отсутствуют конфликтующие overflow-свойства

Рекомендации по использованию

  • всегда включать useStickyClasses при работе с визуальными эффектами
  • использовать кастомные имена классов в больших проектах
  • избегать ручного управления состояниями через JavaScript, если это можно сделать через CSS
  • проверять поведение в контейнерах с overflow: hidden и overflow: auto

Внутренняя логика

Stickybits отслеживает:

  • позицию элемента относительно viewport
  • границы родительского контейнера
  • текущее значение scroll

При изменении состояния:

  1. вычисляется новое положение
  2. определяется текущий статус (sticky / stuck / normal)
  3. обновляются классы

Это происходит в обработчике прокрутки с оптимизациями (throttling), что делает механизм достаточно эффективным.

Связь с адаптивной версткой

useStickyClasses позволяет легко адаптировать поведение под разные экраны:

@media (max-width: 768px) {
  .js-is-sticky {
    position: static;
  }
}

Таким образом можно отключать или менять поведение sticky-элементов без изменения JavaScript-кода.

Оглавление