Параметр tolerance

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

Формат и структура

headroom принимает параметр tolerance в двух основных формах:

  1. Число
tolerance: 5

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

  1. Объект
tolerance: {
  up: 10,
  down: 20
}

Такой подход позволяет задавать разные пороги для прокрутки вверх (up) и вниз (down). Например, если up меньше down, хедер будет реагировать быстрее на движение вверх (появляться при малом скролле) и медленнее скрываться при движении вниз.

Принцип работы

Headroom.js отслеживает текущую позицию скролла и сравнивает её с предыдущей позицией. Если разница превышает значение tolerance, выполняется одно из действий:

  • Скролл вниз больше порога → добавляется класс headroom--unpinned, хедер скрывается.
  • Скролл вверх больше порога → добавляется класс headroom--pinned, хедер показывается.

Таким образом, tolerance предотвращает слишком частые срабатывания и “дрожание” хедера при минимальном движении страницы.

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

Одинаковая чувствительность в обе стороны:

var myElement = document.querySelector("header");
var headroom  = new Headroom(myElement, {
  tolerance: 10,
  offset: 50,
  classes: {
    pinned: "headroom--pinned",
    unpinned: "headroom--unpinned",
    top: "headroom--top",
    notTop: "headroom--not-top"
  }
});
headroom.init();

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

Разная чувствительность вверх и вниз:

var myElement = document.querySelector("header");
var headroom  = new Headroom(myElement, {
  tolerance: {
    up: 5,
    down: 20
  },
  offset: 50
});
headroom.init();

Хедер быстро появляется при прокрутке вверх на 5 пикселей и медленно скрывается при прокрутке вниз до 20 пикселей. Такой подход подходит для длинных страниц с интенсивной прокруткой, где важно не терять навигацию при лёгких движениях.

Тонкости настройки

  • Слишком маленькое значение (1–3) вызывает частые переключения классов, что создаёт эффект “дрожащего” хедера.
  • Слишком большое значение (30–50) делает хедер менее отзывчивым, он может скрываться или появляться с задержкой, что иногда ухудшает UX.
  • При использовании объекта с разными значениями up и down можно добиться более естественного поведения, где хедер мгновенно появляется при необходимости, но не отвлекает при медленной прокрутке вниз.

Взаимодействие с другими параметрами

  • offset — смещение, после которого начинается отслеживание скролла. В сочетании с tolerance позволяет контролировать момент реакции хедера.
  • classes — классы, которые будут добавляться в зависимости от состояния. Правильная настройка tolerance гарантирует, что классы будут меняться плавно, без лишних срабатываний.

Практические рекомендации

  • Для коротких страниц или небольших хедеров достаточно tolerance: 5–10.
  • Для длинных страниц с динамическим контентом стоит использовать объект с разными значениями, например { up: 5, down: 15 }, чтобы хедер появлялся быстрее при прокрутке вверх.
  • Если хедер содержит критичную навигацию, лучше снизить значение up, чтобы меню всегда появлялось вовремя.

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

Оглавление