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

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

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

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

Или через npm:

npm install stickybits

После подключения библиотеки можно создать «липкий» элемент.

Инициализация Stickybits

Основной функцией библиотеки является stickybits(). Она принимает два аргумента:

  1. Селектор элемента — строка CSS-селектора или объект DOM.
  2. Опции — объект с настройками.

Простейший пример:

stickybits('.sticky-element');

В этом случае элемент с классом .sticky-element будет автоматически «прилипать» при прокрутке страницы.

Основные опции

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

  • stickyBitStickyOffset (по умолчанию 0) — смещение элемента от верхней границы окна браузера, когда он становится липким. Пример:
stickybits('.sticky-element', { stickyBitStickyOffset: 20 });

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

  • useStickyClasses (по умолчанию true) — добавляет CSS-классы is-sticky, is-stuck для управления состоянием элемента через стили. Это упрощает визуальные эффекты при смене состояния.
stickybits('.sticky-element', { useStickyClasses: true });

  • useFixed (по умолчанию true) — указывает, использовать ли position: fixed вместо нативного position: sticky. В некоторых браузерах фиксированная позиция работает стабильнее и обеспечивает более предсказуемое поведение.

  • verticalPosition (по умолчанию 'top') — позволяет задавать, к какой стороне экрана элемент должен «прилипать» ('top' или 'bottom').

stickybits('.sticky-element', { verticalPosition: 'bottom' });
  • stickyClass, stuckClass — позволяют изменить стандартные классы is-sticky и is-stuck на собственные.

Пример: Липкая шапка сайта

Для практического понимания создадим пример с шапкой, которая фиксируется при прокрутке страницы:

<header class="header">
  Липкая шапка
</header>
<main>
  <p>Длинный контент...</p>
</main>

CSS для начальной визуализации:

.header {
  width: 100%;
  height: 60px;
  background-color: #3498db;
  color: #fff;
  line-height: 60px;
  text-align: center;
}

.is-sticky {
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

Jav * aScript:

stickybits('.header', {
  stickyBitStickyOffset: 0,
  useStickyClasses: true
});

После инициализации шапка станет «липкой» при прокрутке, а при фиксации к верху будет добавляться класс .is-sticky, позволяющий применять дополнительные стили.

Динамическая работа с несколькими элементами

Stickybits поддерживает множественные элементы. Можно передать селектор, соответствующий группе элементов:

stickybits('.sticky-item');

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

Для элементов с разной высотой и контентом это особенно важно, так как библиотека автоматически рассчитывает границы фиксации и освобождения элемента.

Обновление и удаление

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

  • update() — пересчитывает позиции и состояния, полезно при динамическом изменении размеров контента.
  • destroy() — удаляет все эффекты sticky, возвращая элемент в исходное состояние.

Пример:

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

stickyInstance.update(); // пересчет при изменении DOM
stickyInstance.destroy(); // удаление sticky

Особенности и рекомендации

  • Stickybits работает в старых версиях браузеров, где position: sticky не поддерживается.
  • Для элементов, которые должны оставаться «липкими» только на определенном участке страницы, можно комбинировать с дополнительными обертками и CSS-классами.
  • При использовании нескольких sticky-элементов на одной странице важно контролировать порядок их размещения, чтобы избежать перекрытия.

Stickybits сочетает в себе простоту и гибкость: минимальный код для базовой фиксации и расширяемость через опции и CSS-классы для сложных интерфейсов.

Оглавление