Обработка события sticky в CSS: решение на JavaScript и jQuery

Быстрый ответ

Чтобы отслеживать активацию position:sticky, воспользуйтесь Intersection Observer API. Создайте дополнительный элемент перед 'sticky'-элементом — так называемый сентинель — и следите за его видимостью. Когда сентинель исчезнет из поля зрения, элемент перейдет в режим прилипания.

const sentinel = document.createElement('div');
stickyElement.before(sentinel);

new IntersectionObserver(([entry]) => {
  if (!entry.isIntersecting) {
    console.log('Sticky-элемент активирован!');
  }
}, { rootMargin: '-1px 0px 0px 0px', threshold: [1] }).observe(sentinel);

Значения rootMargin и threshold должны соответствовать установленным критериям видимости элемента.

Ускоряем производительность

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

Для эффективной реакции на события прокрутки используйте специальные утилиты для ограничения частоты или функцию throttle из библиотеки lodash.

Поиск родителя с возможностью прокрутки

Иногда 'sticky'-свойство не работает из-за значений overflow у родительского элемента. Чтобы устранить проблему, найдите первого родителя, у которого установлено свойство прокрутки:

function getFirstScrollableParent(node) {
  let parent = node.parentElement;
  while (parent) {
    if ((/auto|scroll/).test(getComputedStyle(parent)['overflow-y'])) {
      return parent;
    }
    parent = parent.parentElement;
  }
  return window;
}

Реагируем на изменения в UI

Добавляйте и удаляйте CSS-классы элементов в момент их прилипания, чтобы сделать интерфейс более понятным:

observer.observe(sentinel);
function observer(entries) {
  entries.forEach(entry => {
    stickyElement.classList.toggle('is-stuck', !entry.isIntersecting);
  });
}

Не забудьте стильно оформить класс .is-stuck в файле styles.css!

Визуализация

Вот как меняется внешний вид страницы в процессе прокрутки вниз:

Начало страницы: 😎➖➖➖➖➖➖➖➖
Прокрутка:       ➖😎➖➖➖➖➖➖
Переход в зону прилипания: ➖➖😎➖➖ 🧲(прилипающий элемент)
Активация прилипания: ➖➖🔒(прилипающий элемент)😎

Добавим обработчик для события scroll:

window.addEventListener('scroll', function() {
  if (carHitsStickyZone()) {
    console.log('Элемент в режиме прилипания!');
  }
});

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

Изменение позиции: 
До прокрутки:     ➖😎
После активации: 🔒😎

При событии прокрутки элемент переходит из обычного положения в 'прилипшее'.

Проверка поддержки браузерами

Многие браузеры еще не поддерживают position:sticky. Проверьте совместимость браузера с таким типом позиционирования для корректной его работы:

if (CSS.supports('position', 'sticky')) {
  // Здесь можно продемонстрировать свое мастерство!
}

Это защитит ваш код от выпадения ошибок в браузерах без поддержки данного функционала.

Рассмотрим возможность использования сторонних инструментов

Несмотря на привлекательность использования встроенных возможностей CSS, библиотеки типа ScrollToFixed могут быть полезны для реализации 'sticky'-элементов. Однако стоит помнить, что использование тяжеловесных полифиллов может снизить производительность вашего приложения.

Также обратите внимание на CORS-проблемы при использовании полифиллов для position:sticky, чтобы избежать ошибок доступа к ресурсам из-за их происхождения.

Советы от профессионалов

Чтобы углубить понимание position:sticky, изучите мнение лидеров отрасли, таких как Пол Ириш.

Полезные материалы

1. position – CSS: Каскадные таблицы стилей | MDN — Ресурс MDN, подробно рассматривающий CSS свойство position, включая sticky.
2. position | CSS-Tricks — Необходимое руководство по CSS-позиционированию от CSS-Tricks.
3. CSS Position Sticky – Как это на самом деле работает! | by Elad Shechter | Medium — Глубокий анализ position:sticky и его особенностей.
4. CSS Positioned Layout Module Level 3 — Детальное описание стандартов W3C для позиционирования элементов в CSS.
5. Can I use... — Руководство по совместимости браузеров с position: sticky.