Offset для разных точек срабатывания

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

Основное назначение offset

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

  1. Числовое значение:

    var headroom = new Headroom(header, {
    offset: 200
});

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

  2. Функция:

    var headroom = new Headroom(header, {
    offset: function() {
        return document.querySelector('.hero').offsetHeight;
    }
});

    Здесь offset вычисляется динамически, исходя из высоты блока .hero. Этот способ особенно полезен на страницах с изменяемым контентом или адаптивной версткой, когда фиксированное значение не подходит.

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

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

var headroom = new Headroom(header, {
    offset: 150,
    onPin: function() {
        console.log('Панель показана');
    },
    onUnpin: function() {
        console.log('Панель скрыта');
    }
});

Для более сложных сценариев можно использовать условные проверки внутри onPin и onUnpin, чтобы имитировать разные точки срабатывания:

var header = document.querySelector('header');
var headroom = new Headroom(header, {
    offset: 0,
    onPin: function() {
        if(window.scrollY > 300) {
            header.classList.add('visible-late');
        }
    },
    onUnpin: function() {
        if(window.scrollY > 100) {
            header.classList.add('hidden-early');
        }
    }
});
headroom.init();

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

Динамический offset для адаптивных интерфейсов

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

function calculateOffset() {
    if(window.innerWidth < 768) {
        return 100;
    } else if(window.innerWidth < 1200) {
        return 200;
    } else {
        return 300;
    }
}

var headroom = new Headroom(header, {
    offset: calculateOffset
});
headroom.init();

window.addEventListener('resize', function() {
    headroom.offset = calculateOffset();
});

Таким образом достигается адаптивное поведение, где порог срабатывания автоматически подстраивается под размер экрана, обеспечивая консистентный UX.

Комбинирование с CSS-анимациями

Offset напрямую влияет на момент, когда элемент получает классы .headroom--pinned и .headroom--unpinned. С помощью CSS можно реализовать плавное скрытие и появление:

header {
    transition: transform 0.3s ease-in-out;
}

.headroom--unpinned {
    transform: translateY(-100%);
}

.headroom--pinned {
    transform: translateY(0);
}

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

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

  • Использовать динамический offset на страницах с переменной высотой контента.
  • Для отдельных сценариев назначать разные точки срабатывания через callbacks, чтобы отделить логику скрытия и показа.
  • Обновлять offset при изменении размеров окна или контента, чтобы не нарушить пользовательский опыт.
  • Комбинировать с CSS-трансформациями для плавной и визуально приятной анимации.

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

Оглавление