Добавление новых липких элементов

Для создания новых липких элементов используется библиотека Stickybits, которая позволяет управлять поведением элементов при скролле с минимальными усилиями. Основная функция инициализации выглядит следующим образом:

const sticky = stickybits('.selector', {
  stickyBitStickyClass: 'is-sticky',
  useStickyClasses: true,
  parentClass: 'sticky-parent'
});
  • .selector — CSS-селектор элементов, которые необходимо сделать липкими.
  • stickyBitStickyClass — класс, который добавляется элементу при активации «липкости».
  • useStickyClasses — если true, библиотека добавляет классы is-sticky, is-stuck автоматически.
  • parentClass — класс родительского контейнера, необходимый для корректного позиционирования при скролле.

После инициализации элемент ведёт себя как «липкий»: он остаётся видимым при скролле, пока не достигнет конца родителя.

Создание нескольких липких элементов

Stickybits поддерживает инициализацию сразу нескольких элементов через общий селектор. Пример:

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

Каждый элемент с классом .sticky-item будет обрабатываться отдельно, добавляя нужные классы при скролле.

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

  • Липкие элементы не перекрывают друг друга, если находятся в разных родителях.
  • Для элементов с общим родителем следует учитывать высоту каждого элемента и родителя. Stickybits автоматически рассчитывает границы «липкости», чтобы элементы корректно фиксировались и отпускались.

Динамическое добавление новых элементов

Если на страницу динамически добавляются элементы после первоначальной загрузки, их нужно вручную инициализировать с помощью Stickybits:

const newStickyElement = document.createElement('div');
newStickyElement.classList.add('sticky-item');
document.body.appendChild(newStickyElement);

stickybits(newStickyElement, { useStickyClasses: true });
  • Важно добавлять элемент в DOM до вызова Stickybits, чтобы библиотека могла рассчитать размеры и позицию.
  • Можно повторно вызвать stickybits() для группы элементов, включая новые, без нарушения работы уже закреплённых элементов.

Управление поведением липких элементов

Stickybits предоставляет несколько ключевых опций, влияющих на работу «липкости»:

  1. stickyBitStickyOffset — смещение от верхней границы окна при фиксации:
stickybits('.sticky-item', { stickyBitStickyOffset: 20 });

Элемент будет оставаться на 20px ниже верхнего края окна при скролле.

  1. useFixed — переключение между CSS position: sticky и position: fixed:
stickybits('.sticky-item', { useFixed: true });

Используется, когда position: sticky не поддерживается браузером или требуется более сложное управление через JS.

  1. recalcEveryScroll — пересчет позиции элемента при каждом скролле. Полезно для динамически изменяющихся элементов, но повышает нагрузку на страницу:
stickybits('.sticky-item', { recalcEveryScroll: true });

Обновление и удаление липких элементов

После создания новых элементов иногда требуется обновить их параметры или полностью удалить «липкость».

  • Обновление:
sticky.update(); // пересчет позиции всех элементов
  • Удаление:
sticky.cleanup(); // удаляет все добавленные классы и возвращает элементы в обычное состояние

Для отдельных элементов можно создать новый экземпляр Stickybits, чтобы не затрагивать существующие.

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

Stickybits генерирует классы is-sticky и is-stuck. Рекомендуется использовать их для стилизации:

.sticky-item.is-sticky {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.sticky-item.is-stuck {
  background-color: #f8f8f8;
}
  • is-sticky — элемент фиксирован в окне и скролл продолжается под ним.
  • is-stuck — элемент достиг конца родителя и перестал быть фиксированным.

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

Советы по производительности

  • Инициализировать Stickybits только для элементов, которые действительно требуют «липкости».
  • Для большого количества элементов использовать общий селектор вместо вызова stickybits() на каждом элементе отдельно.
  • Избегать recalcEveryScroll, если элементы статичны.
  • Для динамических элементов — оптимально пересчитывать только новые экземпляры, а не все сразу.

Stickybits обеспечивает гибкое управление липкими элементами, позволяя добавлять новые элементы, настраивать смещения, пересчитывать позиции и использовать классы для CSS-стилизации без сложных JS-расчетов.

Оглавление