Динамический offset

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

Основы использования offset

В Waypoints свойство offset задаёт расстояние от верхнего края окна браузера, при достижении которого вызывается обработчик события waypoint. Обычно offset задаётся как число (в пикселях) или строка с процентом ('50%'). Например:

var waypoint = new Waypoint({
  element: document.getElementById('section1'),
  handler: function(direction) {
    console.log('Waypoint сработал!');
  },
  offset: '75%'
});

В этом примере waypoint сработает, когда верх элемента достигнет 75% высоты видимой части окна.

Динамический offset через функцию

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

var waypoint = new Waypoint({
  element: document.getElementById('section2'),
  handler: function(direction) {
    console.log('Динамический waypoint сработал!');
  },
  offset: function() {
    var headerHeight = document.querySelector('header').offsetHeight;
    return window.innerHeight / 2 - headerHeight;
  }
});

Здесь точка срабатывания вычисляется как половина высоты окна минус высота шапки страницы, что обеспечивает корректное поведение при изменении размеров окна или динамических изменений DOM.

Ключевой момент: функция offset выполняется при каждой проверке waypoint, что позволяет учитывать любые изменения в структуре страницы.

Использование с процентами и функциями

Waypoints поддерживает комбинирование процентов и динамических вычислений через функции. Например, можно задать offset в зависимости от текущей высоты элемента:

var waypoint = new Waypoint({
  element: document.getElementById('feature'),
  handler: function(direction) {
    console.log('Waypoint сработал на feature!');
  },
  offset: function() {
    return this.element.offsetHeight * 0.8;
  }
});

Здесь this.element ссылается на элемент, к которому привязан waypoint, а offset рассчитывается как 80% высоты элемента.

Offset при адаптивной верстке

Динамический offset особенно полезен на адаптивных сайтах, где размеры блоков и окна часто меняются. Например, если необходимо запускать анимацию только после того, как видна большая часть блока:

var waypoint = new Waypoint({
  element: document.querySelector('.promo-section'),
  handler: function(direction) {
    this.element.classList.add('visible');
  },
  offset: function() {
    if (window.innerWidth < 768) {
      return '90%';
    } else {
      return '50%';
    }
  }
});

В этом примере для мобильных устройств анимация запускается позже (90% прокрутки блока), а на больших экранах — раньше (50%).

Управление направлением с dynamic offset

Waypoints предоставляет параметр direction в обработчике, который указывает направление прокрутки ("down" или "up"). Динамический offset позволяет различать действия при прокрутке в разные стороны:

var waypoint = new Waypoint({
  element: document.querySelector('.stats'),
  handler: function(direction) {
    if (direction === 'down') {
      console.log('Начало анимации при прокрутке вниз');
    } else {
      console.log('Возврат к начальному состоянию при прокрутке вверх');
    }
  },
  offset: function() {
    return window.innerHeight - 100;
  }
});

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

Рекомендации по производительности

  • Использовать функции offset только при необходимости. Частые вычисления на больших страницах могут создавать нагрузку при скролле.
  • Кэшировать размеры элементов внутри функции offset, если они не меняются динамически.
  • Для сложных сценариев можно комбинировать Waypoints с requestAnimationFrame для плавной обработки offset и уменьшения количества срабатываний.

Примеры продвинутых сценариев

  1. Скролл до середины блока:
offset: function() {
  return this.element.offsetTop + this.element.offsetHeight / 2 - window.innerHeight / 2;
}
  1. Адаптация под фиксированное меню:
offset: function() {
  var navHeight = document.querySelector('.navbar').offsetHeight;
  return window.innerHeight / 2 - navHeight;
}
  1. Динамическая задержка анимации:
offset: function() {
  return Math.max(100, window.innerHeight / 3);
}

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

Динамический offset является одним из самых мощных инструментов Waypoints, позволяя адаптировать взаимодействие элементов с прокруткой под любые условия страницы, размеры экранов и динамические изменения DOM.

Оглавление