Tolerance для верхней и нижней прокрутки

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

Формат параметра tolerance

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

const headroom = new Headroom(document.querySelector("header"), {
    tolerance: 5 // одинаковое значение для верхней и нижней прокрутки
});
headroom.init();

В этом примере 5 пикселей — минимальное расстояние прокрутки, после которого сработает скрытие или показ шапки. Любые колебания меньше 5 пикселей будут игнорироваться.

Для более тонкой настройки допускается использование объекта:

const headroom = new Headroom(document.querySelector("header"), {
    tolerance: {
        up: 10,   // верхняя прокрутка
        down: 20  // нижняя прокрутка
    }
});
headroom.init();
  • up — прокрутка вверх (скрытие шапки при скролле вверх или показ, если она была скрыта)
  • down — прокрутка вниз (скрытие шапки при скролле вниз или показ, если возвращается на верх)

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

Поведение при различных значениях

  • Малое значение (0–5 пикселей): элемент реагирует на любые колебания прокрутки. Может создать эффект “дрожания” шапки при незначительном скролле.
  • Среднее значение (10–20 пикселей): создаёт сбалансированное поведение — шапка скрывается и появляется плавно, без резких изменений.
  • Большое значение (50 пикселей и выше): задержка срабатывания значительная, шапка не реагирует на небольшие движения. Подходит для интерфейсов с длительным контентом, чтобы минимизировать лишние переключения.

Практические примеры

  1. Стандартное скрытие при прокрутке вниз и показ при прокрутке вверх с минимальной задержкой:
const headroom = new Headroom(document.querySelector("header"), {
    tolerance: {
        up: 5,
        down: 5
    },
    offset: 100
});
headroom.init();
  1. Сильная чувствительность при прокрутке вверх и меньшая при прокрутке вниз:
const headroom = new Headroom(document.querySelector("header"), {
    tolerance: {
        up: 5,    // быстро показываем шапку при движении вверх
        down: 30  // медленно скрываем при движении вниз
    }
});
headroom.init();

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

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

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

Взаимодействие с другими опциями Headroom.js

  • tolerance тесно связан с offset. Если offset больше значения tolerance, элемент начнёт реагировать только после прохождения заданного расстояния от верхней границы страницы.
  • Можно комбинировать с событиями onPin и onUnpin для выполнения анимаций или изменения стилей при срабатывании толерантности прокрутки.
const headroom = new Headroom(document.querySelector("header"), {
    tolerance: { up: 10, down: 20 },
    onPin: () => console.log("Шапка показана"),
    onUnpin: () => console.log("Шапка скрыта")
});
headroom.init();

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

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

Оглавление