Использование в Vanilla JavaScript

Stickybits — легковесная библиотека для управления «липким» поведением элементов на странице, заменяющая стандартное position: sticky в браузерах с расширенными возможностями кастомизации. Она позволяет создавать элементы, которые остаются закреплёнными при прокрутке, с поддержкой fallback-режимов и плавного контроля.

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

Stickybits можно подключить через CDN или пакетный менеджер. Для Vanilla JavaScript достаточно включить скрипт в <head> или перед закрывающим тегом <body>:

<script src="https://unpkg.com/stickybits/dist/stickybits.min.js"></script>

Инициализация выполняется вызовом функции stickybits с селектором целевых элементов:

stickybits('.sticky-element');

Ключевые моменты при инициализации:

  • Параметр селектора должен точно соответствовать классу или идентификатору элемента.
  • Stickybits автоматически определяет браузерные возможности и выбирает подходящий способ закрепления (position: sticky или fallback с JS).
  • Возвращает объект Stickybits, который можно использовать для обновления или удаления поведения.

Настройка опций

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

stickybits('.sticky-element', {
  stickyBitStickyOffset: 20,
  useStickyClasses: true,
  verticalPosition: 'top',
  parentClass: 'sticky-parent',
});

Разбор параметров:

  • stickyBitStickyOffset — смещение от верха страницы при закреплении. Полезно при фиксированных шапках.
  • useStickyClasses — включает добавление CSS-классов (.js-is-sticky, .js-is-stuck) для управления стилями через CSS.
  • verticalPosition — 'top' или 'bottom', указывает, где элемент будет «прилипать».
  • parentClass — класс родительского контейнера, который ограничивает область действия «липкого» элемента.

Работа с динамическим контентом

Если на странице добавляются новые элементы после инициализации Stickybits, их необходимо заново инициализировать:

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

stickybits(newElement);

Stickybits корректно определяет высоту родителя и позицию элемента даже при динамическом добавлении на страницу.

Управление состоянием

Stickybits предоставляет методы для обновления и удаления «липкого» поведения:

const stickyInstance = stickybits('.sticky-element');

// Обновление размеров и позиции (например, после изменения контента)
stickyInstance.update();

// Удаление sticky-поведения
stickyInstance.cleanup();

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

  • update() пересчитывает высоту родителя и проверяет, нужно ли закреплять элемент заново.
  • cleanup() удаляет все добавленные классы и возвращает элемент в исходное состояние.

Использование CSS-классов

При включении useStickyClasses: true библиотека добавляет классы, которые можно использовать для стилизации:

  • .js-is-sticky — элемент находится в режиме sticky, но ещё не достиг нижнего ограничения родителя.
  • .js-is-stuck — элемент достиг нижнего края родителя и перестал двигаться.
  • .js-is-unstuck — элемент не закреплён.

Пример CSS:

.sticky-element.js-is-sticky {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sticky-element.js-is-stuck {
  opacity: 0.8;
}

Ограничение области действия

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

stickybits('.sticky-element', { parentClass: 'container' });

Если элемент превышает высоту родителя, Stickybits корректно «отпускает» его, предотвращая перекрытие контента за пределами родителя.

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

Stickybits автоматически учитывает особенности мобильных браузеров:

  • Плавная работа при прокрутке на тач-устройствах.
  • Поддержка нестабильной высоты элементов (например, при загрузке изображений).
  • Возможность отключения «липкости» на маленьких экранах с помощью медиазапросов:
if (window.innerWidth > 768) {
  stickybits('.sticky-element');
}

Интеграция с анимациями

Stickybits может использоваться совместно с CSS-анимациями и JS-триггерами. Например, при добавлении класса .js-is-sticky можно запускать анимацию плавного появления:

.sticky-element.js-is-sticky {
  animation: fadeIn 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

Это создаёт эффект «прилипания с анимацией», который легко настраивается через CSS.

Производительность и оптимизация

  • Stickybits минимизирует использование обработчиков событий scroll и resize.
  • Для большого количества «липких» элементов рекомендуется инициализировать библиотеку по группам или при необходимости, а не на все элементы сразу.
  • При динамическом контенте стоит использовать update() после завершения изменений DOM, чтобы избежать лишних перерасчётов.

Stickybits в Vanilla JavaScript предоставляет лёгкий и гибкий способ реализации «липких» элементов с точным контролем поведения, визуальных эффектов и области действия, что делает его универсальным инструментом для интерфейсных решений любой сложности.

Оглавление