Событие stuck

Библиотека Stickybits предназначена для реализации “липких” элементов на веб-странице с помощью JavaScript, упрощая работу с позиционированием элементов при прокрутке. Одним из ключевых аспектов работы Stickybits является возможность отслеживания состояний элемента: когда он становится “липким”, когда возвращается в обычное положение и когда фиксируется в нижней границе родителя. Событие stuck относится к этому функционалу и играет важную роль при управлении поведением элементов.

Определение события stuck

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

Основная цель события — дать возможность выполнять действия именно в этот момент. Например, можно запускать анимации, изменять стили или запускать логирование для аналитики.

Подключение и инициализация Stickybits

Для работы с событиями сначала нужно создать экземпляр Stickybits:

// Инициализация sticky элемента
const stickyElement = stickybits('.my-sticky', {
  stickyBitStickyOffset: 0, // смещение сверху при фиксации
  useStickyClasses: true     // добавляет CSS классы для состояний
});

Параметр useStickyClasses важен, если планируется использовать CSS-классы .is-sticky, .is-stuck и .is-top, так как событие stuck тесно связано с классом .is-stuck.

Подписка на событие stuck

Stickybits позволяет отслеживать событие через стандартные DOM-события CustomEvent. Для элемента можно добавить слушатель:

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

element.addEventListener('stuck', function(event) {
  console.log('Элемент достиг нижней границы родителя и зафиксирован:', event.target);
  // Здесь можно добавить любые действия
});

В этом примере event.target указывает на элемент, который стал “stuck”. Событие срабатывает только один раз при достижении нижней границы родителя, если элемент снова покинет эту позицию (например, прокрутка вверх), оно не повторяется до следующей фиксации.

Взаимодействие с CSS-классами

Stickybits автоматически добавляет и убирает классы, связанные с состояниями элемента:

  • .is-top — элемент в исходном положении.
  • .is-sticky — элемент фиксируется в верхней части видимой области.
  • .is-stuck — элемент зафиксирован в нижней границе родителя.

Событие stuck срабатывает одновременно с добавлением класса .is-stuck. Это позволяет комбинировать JS и CSS для создания сложных визуальных эффектов:

.my-sticky.is-stuck {
  background-color: #f0f0f0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

Отличие stuck от sticky и unstuck

  • sticky — срабатывает, когда элемент начинает прилипать к верхней части окна.
  • stuck — срабатывает, когда элемент достигает нижней границы родителя и полностью фиксируется.
  • unstuck — срабатывает, когда элемент выходит из состояния stuck, возвращаясь к нормальному позиционированию.

Примеры практического использования

  1. Фиксированная кнопка с визуальной индикацией:
element.addEventListener('stuck', () => {
  element.textContent = 'Вы достигли конца секции';
});
  1. Анимация при фиксации:
element.addEventListener('stuck', () => {
  element.classList.add('animate-stuck');
});
  1. Логирование для аналитики:
element.addEventListener('stuck', () => {
  sendAnalytics({action: 'sticky_end', element: element.id});
});

Советы по оптимизации

  • Использовать useStickyClasses: true, чтобы классы синхронизировались с событиями, что упрощает стилизацию.
  • Минимизировать тяжёлые вычисления внутри обработчика stuck, так как событие может срабатывать при быстрой прокрутке, особенно на длинных страницах.
  • Проверять родительский контейнер, так как событие stuck не сработает, если родитель имеет недостаточную высоту для фиксации элемента.

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

Оглавление