Фиксированная навигация

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

Ключевая особенность Stickybits — упрощённое управление состоянием элемента: библиотека отслеживает положение скролла и автоматически переключает элемент между обычным потоком документа и фиксированным положением.

import Stickybits from 'stickybits';

const sticky = Stickybits('.header', {
  stickyBitStickyOffset: 0,  // отступ от верха окна
  useStickyClasses: true      // добавляет CSS-классы для состояний
});

Инициализация и параметры

Метод Stickybits() принимает два аргумента: селектор или DOM-элемент и объект с настройками.

Основные параметры:

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

Пример с использованием смещения и классов:

Stickybits('.menu', {
  stickyBitStickyOffset: 50,
  useStickyClasses: true,
  verticalPosition: 'top'
});

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

Stickybits автоматически отслеживает прокрутку и меняет состояние элемента:

  • Обычное состояние — элемент следует обычному потоку документа.
  • Sticky (js-is-sticky) — элемент фиксируется в окне при достижении верхнего или нижнего края.
  • Stuck (js-is-stuck) — элемент «прилипает» к последней возможной позиции внутри родителя.

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

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

.js-is-stuck {
  position: absolute;
  bottom: 0;
}

Динамическая инициализация и уничтожение

Stickybits поддерживает динамическое управление элементами после инициализации. Это полезно для SPA или при изменении DOM.

// Создание Stickybit
const sticky = Stickybits('.sidebar');

// Уничтожение
sticky.cleanup();

// Повторная инициализация
sticky.update();

Метод cleanup() удаляет все классы и inline-стили, полностью возвращая элемент в исходное состояние. Метод update() пересчитывает позиции и пересоздаёт «липкий» эффект, если изменился размер или расположение контейнера.

Использование с множеством элементов

Stickybits легко масштабируется на несколько элементов:

Stickybits('.section-header', {
  useStickyClasses: true,
  stickyBitStickyOffset: 20
});

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

Работа с контейнерами и ограничение высоты

Важно помнить, что Stickybits ограничивает движение элемента размером родителя. Если родительский контейнер меньше высоты элемента или окна, элемент может быть зафиксирован в «прилипшем» состоянии раньше, чем ожидалось.

Для корректной работы рекомендуется:

  • Убедиться, что родительский контейнер имеет явную высоту или минимальный размер.
  • Использовать stickyBitStickyOffset для предотвращения наложения на верхние элементы страницы.
  • В случае адаптивного дизайна пересчитывать Stickybits после изменения размеров окна.
window.addEventListener('resize', () => {
  sticky.update();
});

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

Ключевой плюс Stickybits — возможность комбинировать JS-логики и CSS-анимации. С помощью классов js-is-sticky и js-is-stuck можно добавить плавные переходы:

.js-is-sticky {
  transition: all 0.3s ease-in-out;
  transform: translateY(0);
}

.js-is-stuck {
  transition: all 0.3s ease-in-out;
  transform: translateY(-10px);
}

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

Поддержка старых браузеров и fallback

Stickybits предоставляет fallback для браузеров без поддержки position: sticky. В этом случае библиотека эмулирует фиксированное положение через position: fixed и вычисление координат при прокрутке. Это гарантирует единообразное поведение на всех платформах, включая IE11.

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

Для большого количества «липких» элементов рекомендуется:

  • Ограничивать количество элементов на странице.
  • Использовать requestAnimationFrame при кастомных обработчиках.
  • Включать только необходимые опции (useStickyClasses и stickyBitStickyOffset), чтобы минимизировать вычисления.

Stickybits лёгок и не блокирует основной поток выполнения скриптов, что делает его удобным для современных SPA и динамических интерфейсов.

Оглавление