Работа с customStickyChangeNumber

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

Это особенно полезно в сложных интерфейсах, где:

  • используется фиксированная шапка
  • присутствуют динамические отступы
  • необходимо синхронизировать несколько sticky-элементов
  • требуется нестандартное UX-поведение

Принцип работы

По умолчанию Stickybits вычисляет момент прилипания на основе позиции элемента в документе. При использовании customStickyChangeNumber происходит переопределение этой логики:

  • значение задаётся в пикселях
  • определяет расстояние от верхней границы viewport
  • при достижении этого значения элемент получает класс .js-is-sticky

Фактически, библиотека начинает отслеживать не сам элемент, а заданную точку на экране.

Базовый пример использования

import stickybits from 'stickybits';

const instance = stickybits('.sidebar', {
  customStickyChangeNumber: 100
});

В этом примере:

  • элемент .sidebar станет “липким” не сразу
  • прилипание произойдёт, когда расстояние до верхней границы окна составит 100px

Влияние на CSS-классы

Stickybits добавляет несколько служебных классов:

  • .js-is-sticky — элемент в состоянии прилипания
  • .js-is-stuck — элемент достиг нижней границы контейнера
  • .js-is-sticky--change — состояние в момент изменения

При использовании customStickyChangeNumber:

  • класс .js-is-sticky будет применён строго при достижении заданного порога
  • .js-is-sticky--change помогает отследить переходное состояние

Пример CSS:

.sidebar.js-is-sticky {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sidebar.js-is-sticky--change {
  transition: all 0.3s ease;
}

Работа с фиксированной шапкой

Один из самых распространённых сценариев — наличие фиксированного header.

Без customStickyChangeNumber sticky-элемент может “залезать” под шапку. Решение:

stickybits('.sidebar', {
  customStickyChangeNumber: 80
});

Если высота шапки равна 80px:

  • элемент начнёт прилипать ровно под ней
  • визуально поведение станет корректным

Динамическое вычисление значения

В реальных приложениях высота элементов часто изменяется. В таких случаях значение можно вычислять:

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

stickybits('.sidebar', {
  customStickyChangeNumber: header.offsetHeight
});

Особенности:

  • учитываются реальные размеры DOM
  • поведение адаптируется к изменениям layout

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

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

let instance;

function initSticky() {
  if (instance) instance.cleanup();

  const headerHeight = document.querySelector('.header').offsetHeight;

  instance = stickybits('.sidebar', {
    customStickyChangeNumber: headerHeight
  });
}

window.addEventListener('resize', initSticky);
initSticky();

Сочетание с другими параметрами

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

stickyBitStickyOffset

Определяет смещение уже прилипшего элемента:

stickybits('.sidebar', {
  customStickyChangeNumber: 100,
  stickyBitStickyOffset: 20
});

Разница:

  • customStickyChangeNumber — когда прилипает
  • stickyBitStickyOffset — где фиксируется

useStickyClasses

Позволяет явно управлять CSS через классы:

stickybits('.sidebar', {
  customStickyChangeNumber: 100,
  useStickyClasses: true
});

Продвинутый сценарий: несколько sticky-элементов

При наличии нескольких элементов важно избежать конфликтов:

stickybits('.nav', {
  customStickyChangeNumber: 0
});

stickybits('.sidebar', {
  customStickyChangeNumber: 120
});

Результат:

  • .nav фиксируется сразу
  • .sidebar — с задержкой
  • элементы не перекрывают друг друга

Анимация при изменении состояния

customStickyChangeNumber часто используется для создания плавных переходов:

.sidebar {
  transition: transform 0.3s ease;
}

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

.sidebar {
  transform: translateY(50px);
}

Поведение:

  • до прилипания элемент смещён
  • при достижении порога — возвращается в нормальное положение

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

Использование customStickyChangeNumber не создаёт значительной нагрузки, однако важно учитывать:

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

Рекомендации:

  • кэшировать DOM-элементы
  • использовать debounce для resize
  • минимизировать количество sticky-инстансов

Типичные ошибки

Неверное значение (слишком большое):

customStickyChangeNumber: 1000

Элемент может никогда не стать sticky.

Игнорирование высоты header:

  • приводит к перекрытию интерфейса

Отсутствие пересчёта при responsive:

  • некорректное поведение на мобильных устройствах

Конфликт с CSS position: sticky:

Stickybits может использовать нативный sticky, если он поддерживается. В таких случаях:

  • customStickyChangeNumber работает через JS-логику
  • важно тестировать поведение в разных браузерах

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

Типичные кейсы:

  • липкие боковые панели в блогах
  • фиксированные фильтры в интернет-магазинах
  • закреплённые элементы интерфейса в dashboard
  • адаптация под сложные header/navigation системы

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

Stickybits отслеживает событие scroll и сравнивает:

  • текущую позицию прокрутки
  • offset элемента
  • значение customStickyChangeNumber

Условно:

if (scrollTop >= elementTop - customStickyChangeNumber) {
  // добавить класс sticky
}

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

Итоговое понимание механизма

customStickyChangeNumber:

  • даёт контроль над моментом прилипания
  • позволяет адаптировать UI под сложные layouts
  • является ключевым инструментом для тонкой настройки sticky-поведения
  • работает как переопределение стандартной логики Stickybits

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

Оглавление