Класс js-is-sticky

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

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

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

Пример работы механизма:

var sticky = stickybits('.menu', { stickyBitStickyOffset: 0 });

В этом случае любой элемент с классом .menu получит js-is-sticky при достижении верхней границы окна браузера.

Влияние на стили

Класс js-is-sticky чаще всего используется для изменения внешнего вида элемента при его закреплении. Наиболее распространённые стили:

.js-is-sticky {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  transition: all 0.3s ease;
}
  • box-shadow — добавляет визуальное разделение между закреплённым элементом и содержимым страницы.
  • background-color — часто используется для выделения закрепленного блока.
  • transition — обеспечивает плавный переход между состояниями.

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

Stickybits позволяет управлять добавлением js-is-sticky через опции при инициализации:

  • useStickyClasses: true | false — включает или отключает автоматическое добавление класса js-is-sticky.
  • stickyBitStickyOffset: number — задаёт вертикальный оффсет, при котором класс активируется.

Пример:

stickybits('.header', { useStickyClasses: true, stickyBitStickyOffset: 10 });

В этом случае элемент .header станет «липким» с отступом 10 пикселей от верхней границы окна, и к нему будет добавлен js-is-sticky.

Применение в комбинации с CSS-анимациями

Класс js-is-sticky удобно использовать для запуска анимаций при закреплении элемента. Пример анимации:

.js-is-sticky {
  transform: translateY(-10px);
  opacity: 1;
  transition: all 0.4s ease;
}

.menu {
  transform: translateY(0);
  opacity: 0.8;
}

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

Динамическое взаимодействие с JavaScript

Можно отслеживать состояние класса и выполнять дополнительные действия:

const menu = document.querySelector('.menu');

window.addEventListener('scroll', () => {
  if(menu.classList.contains('js-is-sticky')) {
    console.log('Меню закреплено');
  } else {
    console.log('Меню в обычном состоянии');
  }
});

Такой подход позволяет интегрировать Stickybits с другими скриптами и компонентами интерфейса.

Важные нюансы использования

  • Класс js-is-sticky добавляется только если включены соответствующие опции библиотеки.
  • Для элементов с динамической высотой важно учитывать оффсет, чтобы избежать рывков при закреплении.
  • В сочетании с CSS position: sticky класс обеспечивает контроль над визуальной частью без вмешательства в саму логику закрепления.

Совместимость и адаптивность

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

Эта функциональность делает js-is-sticky центральным элементом при работе с «липкими» блоками, позволяя полностью контролировать визуальные и интерактивные эффекты при закреплении элементов.

Оглавление