target для sticky-элементов

В библиотеке Locomotive Scroll механика закрепления элементов на странице (sticky) реализуется с помощью специальных атрибутов, главным из которых является data-scroll-sticky и связанного с ним data-scroll-target. Эти атрибуты позволяют создавать плавное и управляемое поведение «липких» элементов, которые остаются видимыми в определённой области прокрутки.

Атрибут data-scroll-sticky

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


  

    Закреплённый блок
  






  Содержимое секции

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

  • Элемент с data-scroll-sticky будет оставаться «прилипшим» в пределах родительской секции или указанного target.
  • Без data-scroll-target sticky элемент ориентируется на ближайшую родительскую секцию с data-scroll-section.
  • Sticky элемент учитывает размеры своего target, останавливаясь, когда достигает конца указанного блока.

Атрибут data-scroll-target

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


  Липкий блок





  Контент, в пределах которого действует sticky

Важные аспекты:

  • Sticky элемент не выйдет за границы target.
  • Target может быть любым блоком, не обязательно родителем sticky элемента.
  • Размер target автоматически вычисляется библиотекой при инициализации.

Инициализация Locomotive Scroll

Для работы sticky элементов необходимо корректно инициализировать Locomotive Scroll:

import LocomotiveScroll from 'locomotive-scroll';

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

Особенности sticky:

  • Sticky элементы требуют smooth scroll, иначе эффекта не будет.
  • Любые динамически изменяемые элементы нужно обновлять через scroll.update() после изменения DOM.

Настройка поведения sticky

Можно управлять поведением липких элементов через CSS и дополнительные атрибуты:

[data-scroll-sticky] {
  position: relative; /* базовая позиция, Locomotive Scroll переписывает её на fixed при скролле */
  top: 0;
  z-index: 10; /* позволяет элементу оставаться над другими блоками */
}
  • top: задаёт смещение от верхней границы viewport при закреплении.
  • z-index: важен, если несколько sticky элементов накладываются друг на друга.

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

При использовании нескольких sticky элементов в одной секции рекомендуется:

  • Указывать отдельный data-scroll-target для каждого элемента.
  • Контролировать z-index, чтобы элементы корректно наслаивались.
  • При перекрытии блоков можно использовать CSS-свойство pointer-events: none для блокировки взаимодействия с нижними элементами.

Обновление и динамическое управление

Если target или sticky элемент изменяются динамически, необходимо вызвать метод:

scroll.update();

Это пересчитает размеры секций и корректно применит позиции sticky элементов. Без вызова update() поведение может быть некорректным.

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

  1. Sticky элементы не работают без smooth scroll – это принципиальное ограничение Locomotive Scroll.
  2. Target должен быть видимым в DOM на момент инициализации, иначе вычисления будут неправильными.
  3. Изменение размеров target после загрузки требует вызова scroll.update().
  4. Вложенные sticky элементы могут конфликтовать, поэтому стоит избегать прямой вложенности одного sticky в другой без отдельного target.

Практическое использование

Типичный сценарий:


  

    Блок с преимуществами

Элемент с преимуществами остаётся на виду, пока не достигнет конца секции #features. Это позволяет создавать «залипающие» заголовки, панели инструментов или навигационные блоки, которые остаются видимыми и не выскакивают за пределы родительской области.

Оглавление