Waypoints.viewportHeight

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

var viewportHeight = Waypoint.viewportHeight();
console.log(viewportHeight); // Выведет высоту видимой области в пикселях

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

Применение в Waypoints

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

var waypoint = new Waypoint({
  element: document.getElementById('feature'),
  handler: function(direction) {
    console.log('Элемент видим!');
  },
  offset: function() {
    return Waypoint.viewportHeight() * 0.8; // Срабатывает, когда элемент достиг 80% высоты viewport
  }
});

Здесь ключевой момент — использование функции в offset. Это гарантирует, что при каждом ресайзе браузера смещение будет пересчитано, а waypoint не потеряет актуальность.

Отличие от обычного offset

В Waypoints offset можно задавать в пикселях или процентах, но использование Waypoints.viewportHeight даёт точный контроль относительно видимой области, независимо от длины документа:

  • Процентная привязка (offset: '50%') вычисляется относительно всей высоты документа.
  • Использование Waypoints.viewportHeight позволяет привязаться к текущей видимой области и динамически адаптироваться к устройству и размеру окна.

Динамическое обновление при изменении размера окна

Если высота окна меняется, то waypoint с фиксированным пиксельным смещением может срабатывать некорректно. Использование Waypoints.viewportHeight в функции offset решает эту проблему:

var waypoint = new Waypoint({
  element: document.getElementById('section'),
  handler: function() {
    console.log('Waypoint сработал!');
  },
  offset: function() {
    return Waypoint.viewportHeight() - 100; // 100px от нижнего края viewport
  }
});

window.addEventListener('resize', function() {
  Waypoint.refreshAll(); // Обновление всех waypoint после изменения размеров
});

Метод Waypoint.refreshAll() пересчитывает позиции всех waypoint, чтобы учитывать новую высоту viewport и изменение контента страницы.

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

  1. Анимация при прокрутке до элемента С помощью Waypoints.viewportHeight можно запускать анимацию, когда элемент почти полностью появляется на экране:
new Waypoint({
  element: document.querySelector('.animate-me'),
  handler: function() {
    this.element.classList.add('active');
  },
  offset: function() {
    return Waypoint.viewportHeight() * 0.9; // 90% высоты окна
  }
});
  1. Фиксированные навигационные подсказки Отслеживание, когда пользователь прокручивает страницу до определённой секции, для изменения состояния навигации:
var sections = document.querySelectorAll('.section');

sections.forEach(function(section) {
  new Waypoint({
    element: section,
    handler: function(direction) {
      console.log('Секция активна:', section.id);
    },
    offset: function() {
      return Waypoint.viewportHeight() / 2; // середина видимой области
    }
  });
});
  1. Lazy-loading контента Загрузка изображений или данных, когда они становятся видимыми, используя высоту viewport:
var lazyImages = document.querySelectorAll('.lazy');

lazyImages.forEach(function(img) {
  new Waypoint({
    element: img,
    handler: function() {
      img.src = img.dataset.src;
    },
    offset: function() {
      return Waypoint.viewportHeight() - 50; // чуть раньше появления на экране
    }
  });
});

Особенности и советы

  • Значение Waypoints.viewportHeight не кэшируется автоматически. Для точного расчёта лучше всегда вызывать его внутри функции offset.
  • Использование Waypoint.refreshAll() важно после изменения DOM, добавления контента или изменения размеров окна.
  • Для мобильных устройств динамическое использование viewport особенно критично, так как высота окна часто меняется при появлении клавиатуры или панели браузера.
  • Waypoints.viewportHeight работает во всех современных браузерах и корректно учитывает скролл-бары, если они отображаются.

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

Оглавление