Настройка порогов видимости

Waypoints — это библиотека для отслеживания появления элементов на странице при скролле. Одним из ключевых аспектов её работы является порог видимости (offset), который определяет, в какой момент элемент считается достигнутым и срабатывает соответствующий обработчик.

Использование параметра offset

Параметр offset задаёт расстояние от верхней границы окна браузера, при котором waypoint активируется. Он может быть указан в нескольких форматах:

  1. Пиксели
var waypoint = new Waypoint({
  element: document.getElementById('section1'),
  handler: function(direction) {
    console.log('Waypoint достигнут', direction);
  },
  offset: 100 // срабатывает за 100px до верхнего края окна
});

Здесь waypoint сработает, когда верхняя граница элемента приблизится к 100 пикселям от верха окна.

  1. Процент от высоты окна
var waypoint = new Waypoint({
  element: document.getElementById('section2'),
  handler: function(direction) {
    console.log('Waypoint достигнут', direction);
  },
  offset: '75%' // срабатывает, когда 75% высоты окна пройдено
});

Использование процентов позволяет создавать адаптивные триггеры, зависящие от размера экрана.

  1. Функции для динамического расчёта
var waypoint = new Waypoint({
  element: document.getElementById('section3'),
  handler: function(direction) {
    console.log('Waypoint достигнут', direction);
  },
  offset: function() {
    return this.element.clientHeight / 2;
  }
});

Функция возвращает число пикселей и вызывается при каждом скролле. Это позволяет задавать динамические пороги, зависящие от текущих размеров элемента.

Направление срабатывания

Waypoints различает два направления скролла: down и up. В обработчике можно использовать параметр direction для различной логики:

var waypoint = new Waypoint({
  element: document.getElementById('section4'),
  handler: function(direction) {
    if (direction === 'down') {
      console.log('Прокрутка вниз — активирован waypoint');
    } else {
      console.log('Прокрутка вверх — активирован waypoint');
    }
  },
  offset: '50%'
});

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

Sticky и контекстные offsets

Waypoints поддерживает создание контекстных точек отсчёта через параметр context. Это полезно для элементов внутри прокручиваемых контейнеров:

var container = document.getElementById('scroll-container');

var waypoint = new Waypoint({
  element: document.getElementById('inner-section'),
  handler: function(direction) {
    console.log('Waypoint внутри контейнера');
  },
  offset: 20,
  context: container
});

В этом примере waypoint срабатывает относительно верхней границы контейнера, а не всего окна.

Комбинация offset и sticky элементов

Для фиксированных элементов (position: sticky) важно учитывать их высоту в расчёте offset:

var header = document.querySelector('.sticky-header');

var waypoint = new Waypoint({
  element: document.getElementById('section5'),
  handler: function(direction) {
    console.log('Waypoint с учётом sticky header');
  },
  offset: function() {
    return header.offsetHeight;
  }
});

Такой подход позволяет точно синхронизировать активацию waypoint с визуальной областью без перекрытий.

Динамическая модификация offset

Waypoints предоставляет метод waypoint.offset(newOffset) для изменения порога после инициализации:

waypoint.offset('30%'); // изменяет порог на 30% от высоты окна

Это полезно для страниц с адаптивным контентом или изменяемыми элементами.

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

  • Использовать пиксели для точных эффектов (например, анимации на конкретном расстоянии).
  • Использовать проценты для адаптивных сценариев, где размеры окна могут изменяться.
  • Применять функции offset для сложных вычислений, зависящих от размеров элементов и sticky компонентов.
  • Проверять работу waypoint на разных разрешениях и при динамическом контенте, чтобы избежать неожиданного срабатывания.

Настройка порогов видимости является основой точного контроля над активацией waypoint и позволяет создавать плавные и предсказуемые эффекты при скролле.

Оглавление