Работа с различными направлениями прокрутки

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

Вертикальная прокрутка

При стандартной вертикальной прокрутке используется событие scroll объекта window. Headroom.js отслеживает изменение позиции страницы и определяет, движется ли пользователь вниз или вверх:

var myElement = document.querySelector(".header");
var headroom  = new Headroom(myElement, {
  tolerance: {
    up: 5,
    down: 5
  },
  offset: 50,
  classes: {
    initial: "headroom",
    pinned: "headroom--pinned",
    unpinned: "headroom--unpinned",
    top: "headroom--top",
    notTop: "headroom--not-top"
  }
});
headroom.init();
  • tolerance определяет чувствительность к движению: значения up и down задают минимальное смещение в пикселях, при котором будет срабатывать событие показа или скрытия.
  • offset задает высоту прокрутки, после которой начинают применяться эффекты.
  • classes позволяют задавать CSS-классы для различных состояний: закреплен вверху, скрыт при прокрутке вниз, показан при прокрутке вверх.

Горизонтальная прокрутка

Хотя Headroom.js ориентирован на вертикальное скрытие элементов, можно отслеживать и горизонтальное движение, модифицируя библиотеку или создавая обертку над основным функционалом:

var lastScrollLeft = 0;
window.addEventListener('scroll', function() {
  var scrollLeft = window.scrollX;
  if(scrollLeft > lastScrollLeft) {
    // Прокрутка вправо — скрыть элемент
    myElement.classList.add('headroom--unpinned');
    myElement.classList.remove('headroom--pinned');
  } else {
    // Прокрутка влево — показать элемент
    myElement.classList.add('headroom--pinned');
    myElement.classList.remove('headroom--unpinned');
  }
  lastScrollLeft = scrollLeft;
});

При горизонтальной прокрутке важно корректно сохранять предыдущую позицию scrollX для определения направления и минимизировать «мигание» элементов при мелких изменениях прокрутки.

Работа с динамическими элементами и контентом

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

headroom.destroy();
headroom.init();

Это позволяет пересчитать параметры offset и корректно реагировать на новые размеры блоков. Особенно полезно при использовании адаптивной верстки, когда высота шапки может меняться в зависимости от ширины экрана.

Настройка чувствительности и задержки

Для сложных интерфейсов часто необходимо тонко настроить реакцию на прокрутку:

  • tolerance.up и tolerance.down можно задавать как числа или функции, чтобы динамически изменять порог срабатывания в зависимости от скорости прокрутки.
  • offset может быть функцией, вычисляющей необходимое смещение исходя из высоты заголовка или текущего состояния страницы.
var headroom = new Headroom(myElement, {
  offset: function() {
    return document.querySelector('.header').offsetHeight;
  },
  tolerance: {
    up: function() { return window.scrollY > 100 ? 10 : 5; },
    down: 5
  }
});
headroom.init();

Обработка событий при смене направления

Headroom.js предоставляет колбеки для событий:

  • onPin вызывается при показе элемента
  • onUnpin вызывается при скрытии
  • onTop и onNotTop — при достижении или покидании верхней позиции страницы

Пример использования:

var headroom = new Headroom(myElement, {
  onPin: function() {
    console.log("Элемент закреплен");
  },
  onUnpin: function() {
    console.log("Элемент скрыт");
  }
});
headroom.init();

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

Множественные направления прокрутки

Для интерфейсов с нестандартными прокрутками можно комбинировать вертикальное и горизонтальное слежение, создавая универсальный контроллер:

var lastScrollTop = 0, lastScrollLeft = 0;
window.addEventListener('scroll', function() {
  var scrollTop = window.scrollY;
  var scrollLeft = window.scrollX;

  if(scrollTop > lastScrollTop) {
    myElement.classList.add('headroom--unpinned');
  } else if(scrollTop < lastScrollTop) {
    myElement.classList.add('headroom--pinned');
  }

  if(scrollLeft > lastScrollLeft) {
    myElement.classList.add('headroom--unpinned-horizontal');
  } else if(scrollLeft < lastScrollLeft) {
    myElement.classList.add('headroom--pinned-horizontal');
  }

  lastScrollTop = scrollTop;
  lastScrollLeft = scrollLeft;
});

Таким образом, Headroom.js позволяет не только управлять видимостью элементов при вертикальной прокрутке, но и расширять возможности для сложных интерфейсов с горизонтальными или комбинированными направлениями движения пользователя.

Адаптация под мобильные устройства

На мобильных устройствах часто необходимо учитывать особенности скролла:

  • Сенсорная прокрутка имеет более плавные изменения, поэтому рекомендуется увеличить tolerance.
  • Использование requestAnimationFrame для оптимизации производительности и предотвращения лишнего перерисовывания.
var ticking = false;
window.addEventListener('scroll', function() {
  if (!ticking) {
    window.requestAnimationFrame(function() {
      headroom.update();
      ticking = false;
    });
    ticking = true;
  }
});

Это позволяет плавно управлять состояниями элементов и снижает нагрузку на процессор при интенсивной прокрутке.

Оглавление