Параметр offset

Параметр offset является ключевым элементом конфигурации библиотеки Headroom.js и отвечает за определение точки, при которой заголовок страницы (header) изменяет своё поведение при прокрутке. Этот параметр позволяет точно настроить момент появления или скрытия шапки, делая интерфейс более динамичным и отзывчивым.

Суть параметра

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

  • Меньшее значение (например, 50–100) делает шапку более чувствительной: она реагирует практически сразу после начала прокрутки.
  • Большее значение (например, 200–300) задерживает срабатывание, создавая эффект «выдержанной» шапки, которая скрывается только после значительной прокрутки.
var header = document.querySelector("header");
var headroom  = new Headroom(header, {
  offset: 200
});
headroom.init();

В этом примере шапка начнёт скрываться только после того, как страница будет прокручена на 200 пикселей.

Влияние на поведение шапки

Параметр offset напрямую влияет на три основных состояния заголовка:

  1. Pinned – шапка закреплена в верхней части экрана.
  2. Unpinned – шапка скрыта при прокрутке вниз.
  3. Top – шапка находится в начальном положении страницы (обычно до достижения offset).

Если offset равен нулю, Headroom реагирует на любое движение сразу, что может создавать эффект «дрожащей» шапки при минимальной прокрутке. Установка разумного значения offset позволяет контролировать момент скрытия и появления шапки, делая интерфейс более комфортным.

Динамическое изменение offset

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

headroom.offset = 150; // новое значение offset
headroom.update();     // применяет изменения

После вызова update() Headroom пересчитывает текущее состояние шапки с учётом нового offset.

Комбинация с другими параметрами

offset особенно эффективно работает в связке с параметрами:

  • tolerance – задаёт чувствительность к направлению прокрутки.
  • classes – позволяет настраивать CSS-классы для состояний pinned, unpinned и top.

Например, для медленного появления шапки можно использовать:

var headroom = new Headroom(header, {
  offset: 150,
  tolerance: {
    up: 10,
    down: 20
  },
  classes: {
    pinned: "header-pinned",
    unpinned: "header-unpinned",
    top: "header-top"
  }
});
headroom.init();

В этом примере шапка будет скрываться только после прокрутки вниз на 20 пикселей, но появляться снова после прокрутки вверх на 10 пикселей. offset при этом определяет стартовую точку срабатывания всех этих изменений.

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

  • Для стандартных страниц с контентом среднего размера значение 100–150 пикселей обеспечивает комфортное поведение.
  • Для длинных лендингов или страниц с большим количеством медиа-контента можно использовать 200–300 пикселей, чтобы шапка не исчезала слишком рано.
  • При адаптивной верстке стоит изменять offset через медиазапросы или JavaScript, чтобы на мобильных устройствах шапка реагировала быстрее.

Использование параметра offset позволяет точно настроить момент реакции шапки, обеспечивая плавный и интуитивный пользовательский опыт при прокрутке страницы.

Оглавление