Работа с jQuery

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

Для начала необходимо подключить саму библиотеку. Stickybits распространяется как через npm/yarn, так и через CDN:

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

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

Инициализация sticky-элементов через jQuery

Stickybits работает с любыми DOM-элементами, но в jQuery удобнее использовать селекторы и метод .each() для применения библиотеки к множеству элементов:

$(document).ready(function() {
  $('.sticky-element').each(function() {
    stickybits(this, {
      stickyBitStickyOffset: 0,
      useStickyClasses: true
    });
  });
});

Ключевые параметры:

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

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

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

function addStickyElement() {
  const $newElement = $('<div class="sticky-element">Новая секция</div>');
  $('body').append($newElement);

  // Инициализация Stickybits для нового элемента
  stickybits($newElement[0], { stickyBitStickyOffset: 10 });
}

Важно использовать индекс [0], потому что Stickybits принимает нативный DOM-элемент, а не объект jQuery.

Управление классами и событиями через jQuery

Stickybits автоматически добавляет классы is-sticky и is-stuck. С помощью jQuery можно легко реагировать на их появление:

$('.sticky-element').on('stickybit:stick', function() {
  $(this).css('background-color', '#f0f0f0');
});

$('.sticky-element').on('stickybit:unstick', function() {
  $(this).css('background-color', '');
});

Эти события позволяют:

Менять стиль элемента при фиксации или отпускании.
Запускать анимации или прокручивать страницу к определённым секциям.

Взаимодействие нескольких sticky-элементов

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

$('.sticky-element').each(function(index) {
  stickybits(this, {
    stickyBitStickyOffset: index * 20, // смещение для каждого элемента
    useStickyClasses: true
  });
});

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

Обновление и разрушение sticky-элементов

Stickybits предоставляет методы update() и destroy() для динамического управления:

const stickyInstance = stickybits($('.sticky-element')[0]);

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

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

В jQuery удобно хранить экземпляры в data-атрибутах, чтобы иметь быстрый доступ:

$('.sticky-element').each(function() {
  const instance = stickybits(this);
  $(this).data('stickybits', instance);
});

// Позднее
$('.sticky-element').each(function() {
  $(this).data('stickybits').destroy();
});

Совместимость с адаптивными интерфейсами

Stickybits корректно обрабатывает изменения размеров окна. Для адаптивных сайтов можно автоматически обновлять элементы через jQuery:

$(window).on('resize', function() {
  $('.sticky-element').each(function() {
    $(this).data('stickybits').update();
  });
});

Так обеспечивается плавное и корректное поведение sticky-элементов на любых разрешениях экрана.