Callback-функции

Stickybits — это легковесная JavaScript-библиотека, предназначенная для управления липким позиционированием элементов на странице. Одним из ключевых инструментов, который она предоставляет, является возможность использования callback-функций для реакции на различные события, связанные с состоянием элемента.

Callback-функции позволяют отслеживать изменения состояния элемента и выполнять определённые действия в ответ на эти изменения. В Stickybits основными состояниями являются:

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

Синтаксис callback-функций

Stickybits предоставляет опцию stickyBitStickyClass для добавления классов и возможность назначения callback-функций через событие onStickyStateChange.

Простейший пример создания sticky-элемента с callback:

import Stickybits from 'stickybits';

const stickyElement = document.querySelector('.sticky');

const stickyInstance = Stickybits(stickyElement, {
  stickyBitStickyClass: 'is-sticky',
  useStickyClasses: true
});

stickyInstance.addStateChangeListener((state) => {
  console.log('Состояние элемента изменилось:', state);
});

В этом примере addStateChangeListener — это метод, который принимает функцию, вызываемую каждый раз при изменении состояния элемента. Параметр state может принимать значения sticky, stuck или default.

Практические сценарии использования callback-функций

1. Изменение стиля элемента при прилипании

Callback позволяет динамически менять CSS-свойства элемента без вмешательства в основной CSS-файл:

stickyInstance.addStateChangeListener((state) => {
  if (state === 'sticky') {
    stickyElement.style.backgroundColor = 'lightblue';
  } else {
    stickyElement.style.backgroundColor = '';
  }
});

2. Анимация при переходе в состояние stuck

Можно запускать анимации только тогда, когда элемент достигает нижней границы контейнера:

stickyInstance.addStateChangeListener((state) => {
  if (state === 'stuck') {
    stickyElement.classList.add('animate-stuck');
  } else {
    stickyElement.classList.remove('animate-stuck');
  }
});

3. Логирование событий для аналитики

Callback-функции удобны для отслеживания взаимодействий пользователей с элементами интерфейса:

stickyInstance.addStateChangeListener((state) => {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify({ element: 'header', state }),
    headers: { 'Content-Type': 'application/json' }
  });
});

Управление множественными элементами

Stickybits поддерживает назначение callback-функций на группу элементов. Это удобно для списков навигации или блоков с одинаковым поведением.

const elements = document.querySelectorAll('.sticky-group');

elements.forEach((el) => {
  const instance = Stickybits(el, { useStickyClasses: true });
  instance.addStateChangeListener((state) => {
    console.log(el, 'текущее состояние:', state);
  });
});

Настройка callback через конфигурацию

Кроме методов экземпляра, callback можно задавать прямо при инициализации Stickybits через опцию onStateChange:

Stickybits('.sticky', {
  useStickyClasses: true,
  onStateChange: (element, state) => {
    console.log('Элемент:', element, 'новое состояние:', state);
  }
});

В этой конфигурации первым аргументом передаётся сам элемент DOM, а вторым — новое состояние. Это позволяет разделять логику разных элементов без необходимости создавать отдельный экземпляр Stickybits для каждого.

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

  • Минимизировать вычисления внутри callback: каждая смена состояния может происходить при скролле, поэтому тяжелые операции замедлят страницу.
  • Использовать CSS-классы для изменений внешнего вида, а не прямое редактирование стилей через JavaScript.
  • Очистка слушателей: если элемент удаляется из DOM, важно снять callback для предотвращения утечек памяти. Stickybits предоставляет метод cleanup:
stickyInstance.cleanup();
  • Комбинировать с библиотеками анимаций: callback-функции удобно интегрировать с GSAP или Anime.js для плавных переходов.

Итоговая структура callback

  1. Инициализация Stickybits.
  2. Назначение callback через метод addStateChangeListener или опцию onStateChange.
  3. В callback проверка состояния элемента (sticky, stuck, default).
  4. Выполнение нужных действий: стили, анимации, логирование.
  5. Очистка слушателей при необходимости.

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

Оглавление