Установка и подключение

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

Установка через npm

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

npm install stickybits

После установки библиотека доступна для импорта в JavaScript-файлах проекта.

Импорт в модульной системе

Для проектов, использующих ES6-модули, импорт выполняется следующим образом:

import stickybits from 'stickybits';

Если используется CommonJS-синтаксис (например, в Node.js или Webpack-проектах), импорт выглядит так:

const stickybits = require('stickybits');

Подключение через CDN

Для быстрых прототипов или страниц без сборщика модулей можно подключить библиотеку через CDN. Вставка скрипта в HTML осуществляется следующим образом:

<script src="https://cdn.jsdelivr.net/npm/stickybits@3.7.8/dist/stickybits.min.js"></script>

После этого объект stickybits становится глобально доступным, и можно вызывать его методы напрямую:

stickybits('.my-sticky-element');

Подключение стилей

Stickybits не требует внешних CSS-файлов для базовой работы, однако для корректного отображения «липких» элементов рекомендуется убедиться, что родительский контейнер имеет корректное позиционирование (position: relative) и высоту. Например:

.container {
  position: relative;
  height: 2000px; /* высота контейнера для демонстрации прокрутки */
}
.my-sticky-element {
  background-color: #f0f0f0;
  padding: 10px;
}

Проверка успешного подключения

Для проверки того, что библиотека подключена корректно, достаточно выполнить базовый вызов:

const stickyInstance = stickybits('.my-sticky-element');
console.log(stickyInstance); // Должен вывести массив объектов Stickybits

Если в консоли появляется объект с методами update, cleanup и свойствами elements, это подтверждает корректное подключение.

Настройки при подключении

Stickybits позволяет передавать объект с опциями при инициализации. На этапе подключения можно сразу указать поведение «липких» элементов:

stickybits('.my-sticky-element', {
  stickyBitStickyOffset: 10, // отступ от верха страницы
  useStickyClasses: true,     // добавлять CSS-классы при фиксации
  verticalPosition: 'top'     // позиционирование элемента
});
  • stickyBitStickyOffset — число пикселей, на которое элемент отступает от верхнего края окна при фиксации.
  • useStickyClasses — булево значение, включающее или отключающее автоматическое добавление классов (is-sticky, is-stuck).
  • verticalPosition — определяет, где элемент будет закреплен: 'top' или 'bottom'.

Инициализация для нескольких элементов

Stickybits поддерживает одновременную работу с коллекцией элементов. Достаточно указать CSS-селектор, и библиотека применит свои функции ко всем подходящим DOM-узлам:

stickybits('.sticky-element');

Результатом будет массив объектов, каждый из которых управляет своим «липким» элементом. Это позволяет легко работать с динамическим контентом и множеством блоков на одной странице.

Выводы по установке

Stickybits можно подключать любым удобным способом: через npm для модульной разработки, через CDN для быстрых прототипов или напрямую через CommonJS. Для корректного отображения важно убедиться в правильной разметке родительского контейнера, а при необходимости — использовать опции при инициализации для гибкой настройки поведения «липких» элементов.

Оглавление