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

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

Параметр tolerance

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

Синтаксис:

var header = new Headroom(document.querySelector("header"), {
  tolerance: {
    up: 5,
    down: 10
  }
});
header.init();
  • up — минимальное смещение при скролле вверх, после которого заголовок покажется.
  • down — минимальное смещение при скролле вниз, после которого заголовок скроется.
Рекомендации по выбору значений:
  • Меньшие значения делают шапку очень чувствительной и она может дергаться при мелких движениях.
  • Большие значения обеспечивают плавное поведение, но могут замедлять реакцию.

Параметр offset

Offset задает точку отсчета, с которой начинается отслеживание скролла. До достижения этой величины заголовок ведет себя как статичный.

var header = new Headroom(document.querySelector("header"), {
  offset: 100
});
header.init();
  • Значение 100 означает, что скрытие/появление шапки начнется только после прокрутки на 100 пикселей вниз.
  • Установка offset помогает избежать ложных срабатываний на коротких страницах или при небольшом скролле.

Функция обратного вызова onPin и onUnpin

Для точной настройки реакции скролла можно использовать колбэки:

var header = new Headroom(document.querySelector("header"), {
  tolerance: 10,
  onPin: function() {
    console.log("Заголовок показан");
  },
  onUnpin: function() {
    console.log("Заголовок скрыт");
  }
});
header.init();
  • Колбэк onPin вызывается, когда заголовок становится видимым после скролла вверх.
  • Колбэк onUnpin срабатывает, когда заголовок скрывается при скролле вниз.
  • В сочетании с tolerance эти функции позволяют точно контролировать моменты срабатывания.

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

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

  1. Увеличить значение tolerance.down на 5–10 пикселей для предотвращения дерганий.
  2. Проверять offset, чтобы заголовок не реагировал на небольшие прокрутки пальцем.
  3. Использовать debounce или CSS-переходы для более плавного эффекта:
.headroom {
  transition: transform 0.3s ease-in-out;
}

Примеры комбинирования параметров

  1. Плавное поведение на длинных страницах:
var header = new Headroom(document.querySelector("header"), {
  tolerance: { up: 15, down: 20 },
  offset: 150
});
header.init();
  1. Очень чувствительное поведение для коротких лендингов:
var header = new Headroom(document.querySelector("header"), {
  tolerance: { up: 5, down: 5 },
  offset: 50
});
header.init();

Важные моменты настройки

  • tolerance и offset работают вместе: слишком маленький offset с высокой чувствительностью может вызвать постоянное скрытие/появление.
  • Для адаптивного дизайна рекомендуется задавать разные значения tolerance и offset для десктопа и мобильных устройств.
  • Проверка на разных скоростях прокрутки помогает выявить оптимальные значения.

Итог

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

Оглавление