data-scroll-sticky

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

Основы работы

Чтобы элемент стал «липким», необходимо добавить к нему два атрибута:

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

Ключевые моменты:

  • data-scroll-sticky указывает Locomotive Scroll, что элемент должен вести себя как sticky.
  • data-scroll-target определяет родительский контейнер, в пределах которого элемент будет фиксироваться. Если атрибут не указан, по умолчанию используется ближайший родительский элемент с data-scroll-container.
  • Липкий элемент остаётся внутри контейнера и не выходит за его пределы.

Настройка области действия

Атрибут data-scroll-target позволяет контролировать область, в пределах которой элемент остаётся зафиксированным:

<section id="sticky-parent">
  <div data-scroll data-scroll-sticky data-scroll-target="#sticky-parent">
    Фиксированный блок
  </div>
</section>

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

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

Совместимость с другими атрибутами Locomotive Scroll

  1. data-scroll и data-scroll-speed

Эффекты параллакса не конфликтуют с data-scroll-sticky. Можно комбинировать фиксированный элемент и скролл-анимацию:

<div data-scroll data-scroll-sticky data-scroll-speed="2" data-scroll-target="#sticky-parent">
  Липкий параллакс
</div>

data-scroll-speed позволяет задавать скорость движения относительно скролла контейнера, создавая эффект ускоренного или замедленного движения.

  1. data-scroll-offset

Позволяет задавать отступы начала и конца «прилипания»:

<div data-scroll data-scroll-sticky data-scroll-target="#sticky-parent" data-scroll-offset="100,50">
  Отступы sticky
</div>
  • Первое число — отступ сверху.
  • Второе число — отступ снизу.

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

Практические рекомендации

  • Элемент с data-scroll-sticky должен иметь достаточную высоту и ширину, чтобы его движение выглядело естественным.
  • Родительский контейнер не должен быть меньше элемента. Иначе элемент выйдет за границы и эффект будет некорректным.
  • Для сложных анимаций рекомендуется комбинировать data-scroll-sticky с событиями Locomotive Scroll, такими как scroll и call:
const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});

scroll.on('scroll', (instance) => {
  const stickyElement = document.querySelector('[data-scroll-sticky]');
  if (instance.scroll.y > 500) {
    stickyElement.classList.add('scrolled');
  } else {
    stickyElement.classList.remove('scrolled');
  }
});

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

Совместимость с CSS

Хотя Locomotive Scroll управляет виртуальным скроллом через JS, элементы с data-scroll-sticky могут использовать стандартные CSS-свойства:

[data-scroll-sticky] {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
}

Однако важно помнить, что позиционирование в CSS (position) не должно конфликтовать с поведением sticky, то есть position: absolute или fixed на элементе с data-scroll-sticky может привести к нежелательным эффектам.

Ограничения и подводные камни

  • Эффект работает корректно только при smooth scroll, то есть с включённым параметром smooth: true.
  • Липкий элемент не может быть родителем других элементов с data-scroll-sticky, иначе поведение будет непредсказуемым.
  • Высота контейнера должна превышать высоту липкого элемента, иначе элемент не сможет полностью закрепиться.

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

Оглавление