Принцип работы data-scroll-sticky

В библиотеке Locomotive Scroll атрибут data-scroll-sticky используется для реализации эффекта «липкого» элемента, который закрепляется на экране при прокрутке определенной области. Этот механизм отличается от стандартного CSS-свойства position: sticky, так как полностью управляется скриптом, учитывает виртуальный скролл и поддерживает анимации в связке с другими функциональностями библиотеки.

Основные принципы работы

  1. Определение контейнера Элемент с data-scroll-sticky должен находиться внутри контейнера с data-scroll-container. Контейнер задает границы, в пределах которых элемент будет «липнуть».

    <div data-scroll-container>
  <div data-scroll-sticky data-scroll-target="#section">
    Липкий элемент
  </div>
</div>

    В этом примере элемент закрепляется относительно блока #section.

  2. Атрибут data-scroll-target Указывает на родительский блок, внутри которого элемент будет фиксироваться. Если не указан, элемент привязывается к ближайшему родителю с прокруткой.

    • Библиотека вычисляет верхнюю и нижнюю границы блока-таргета.
    • Фиксация начинается, когда верхняя граница элемента совпадает с верхом контейнера viewport.
    • Освобождение происходит, когда нижняя граница контейнера достигает нижней границы элемента.

  3. Вычисление позиции Locomotive Scroll использует виртуальный скролл, то есть смещение контента задается через transform: translateY. Липкий элемент привязывается к этим вычислениям:

    • На каждой итерации скролла библиотека вычисляет позицию элемента относительно контейнера.
    • Если текущий scrollY находится между верхней и нижней границей контейнера, элемент получает стиль position: fixed (через JS, а не CSS).
    • В момент выхода за границы контейнера стиль удаляется, и элемент возвращается на своё место в документе.

  4. Зависимость от высоты элементов Высота липкого элемента и высота контейнера критически важны:

    • Если элемент выше контейнера, он не сможет полностью закрепиться.
    • При изменении размеров окна библиотека автоматически пересчитывает позиции и границы, чтобы избежать «подпрыгивания» или смещения.

Дополнительные атрибуты и настройки

  • data-scroll-offset Задает смещение от верха контейнера или viewport, при котором начинается фиксация.

    <div data-scroll-sticky data-scroll-target="#section" data-scroll-offset="50">
  Липкий блок с отступом 50px
</div>

    Значение может быть в пикселях (50) или в процентах (10%).

  • data-scroll-repeat Позволяет элементу повторно фиксироваться при повторном прохождении границ контейнера. Без этого атрибута фиксация срабатывает только один раз при прокрутке вниз.

  • Анимации и transform Поскольку Locomotive Scroll использует transform для виртуального скролла, все стили position: fixed на липком элементе применяются через JS. Это позволяет интегрировать data-scroll-sticky с data-scroll анимациями: изменение opacity, scale, translate и т.д. выполняется синхронно с фиксацией элемента.

Важные особенности

  • Элемент не выходит за пределы контейнера. Это ключевое отличие от CSS sticky, который может «липнуть» и к родителям без учёта transform.
  • Работает корректно с горизонтальной и вертикальной прокруткой, если указаны соответствующие контейнеры.
  • Библиотека учитывает динамическое добавление/удаление контента и пересчитывает позиции элементов с data-scroll-sticky при событии resize.

Пример реализации

<div id="section" data-scroll-container>
  <div data-scroll-sticky data-scroll-target="#section" data-scroll-offset="20">
    Закреплённый блок
  </div>
  <div style="height: 2000px;">Контент для прокрутки</div>
</div>

<script>
  const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
  });
</script>

В этом примере блок будет фиксироваться в верхней части viewport при прокрутке до верхней границы контейнера #section с отступом 20px. После достижения нижней границы контейнера элемент перестанет быть фиксированным.

Практические советы

  • Для сложных интерфейсов, где элементы перекрывают друг друга, рекомендуется использовать data-scroll-target, чтобы избежать наложений.
  • Если требуется, чтобы несколько элементов были липкими одновременно, каждый должен иметь свой data-scroll-target, иначе возможны конфликты расчёта позиции.
  • Любые динамические изменения высоты контейнера или элемента должны сопровождаться вызовом scroll.update(), чтобы библиотека пересчитала все позиции.

Эти принципы позволяют создавать точный и плавный эффект липких блоков, полностью управляемый скриптом, с поддержкой анимаций и адаптивной верстки, что делает data-scroll-sticky мощным инструментом для интерактивного интерфейса.

Оглавление