onNotTop для ухода с верхней позиции

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

Основной синтаксис и подключение

Для использования onNotTop необходимо создать экземпляр Headroom для выбранного DOM-элемента:

// Получение элемента шапки
var header = document.querySelector('header');

// Инициализация Headroom
var headroom = new Headroom(header, {
    offset: 0,
    tolerance: {
        up: 5,
        down: 0
    },
    onNotTop: function() {
        console.log('Шапка покинула верхнюю позицию');
    }
});

// Активация Headroom
headroom.init();

Ключевые параметры:

  • offset — расстояние в пикселях от верхней границы окна, после которого событие onNotTop сработает. Если offset равен 0, событие активируется сразу при первом скролле вниз.
  • tolerance — объект, определяющий чувствительность к прокрутке. Параметр up задаёт количество пикселей прокрутки вверх, при котором шапка снова может вернуться на верх, а down — прокрутка вниз.

Логика работы onNotTop

Событие onNotTop вызывается один раз при переходе шапки из состояния наверху страницы в состояние не на верхней позиции. В этот момент:

  • Шапка остаётся видимой или скрывается в зависимости от конфигурации Headroom.
  • Можно изменять стиль элемента, добавлять CSS-классы или запускать анимации.
  • Срабатывает после достижения заданного offset.

Пример использования для динамического изменения стилей:

var header = document.querySelector('header');

var headroom = new Headroom(header, {
    offset: 50,
    onNotTop: function() {
        header.classList.add('scrolled');
    },
    onTop: function() {
        header.classList.remove('scrolled');
    }
});

headroom.init();

В этом примере класс scrolled применяется к шапке, когда пользователь прокручивает страницу вниз на 50 пикселей, и удаляется при возврате на верх.

Совмещение с другими событиями

Headroom.js предоставляет набор событий:

  • onPin — шапка фиксируется, когда прокрутка вверх.
  • onUnpin — шапка скрывается при прокрутке вниз.
  • onTop — шапка снова на верхней позиции.
  • onNotTop — шапка покинула верхнюю позицию.

Эти события можно комбинировать для создания сложных эффектов, например, изменение цвета, тени или прозрачности шапки при прокрутке:

var headroom = new Headroom(header, {
    offset: 100,
    onNotTop: function() {
        header.style.boxShadow = '0 2px 8px rgba(0,0,0,0.2)';
    },
    onTop: function() {
        header.style.boxShadow = 'none';
    }
});

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

  • onNotTop лучше использовать для визуальных изменений, сигнализирующих о начале прокрутки, а не для сложной логики.
  • Установка offset позволяет отложить активацию события до определённого момента скролла, что особенно важно для длинных страниц.
  • Совместно с CSS-анимациями можно создавать плавные переходы, чтобы изменение стиля шапки выглядело естественно и не резало глаз.

Отличие onNotTop от onUnpin

  • onNotTop срабатывает сразу после ухода шапки с верхней позиции, независимо от направления скролла.
  • onUnpin срабатывает только при прокрутке вниз, когда шапка скрывается.

Использование onNotTop актуально для случаев, когда нужно уже при первом смещении шапки вниз применить визуальные эффекты или активировать дополнительные элементы интерфейса.

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

var headroom = new Headroom(header, {
    offset: 20, // срабатывает через 20px прокрутки
    tolerance: {
        up: 10,   // чтобы шапка вернулась вверх, нужно прокрутить 10px вверх
        down: 5   // чтобы сработал onUnpin, нужно прокрутить 5px вниз
    },
    onNotTop: function() {
        header.classList.add('active');
    }
});

Вывод: onNotTop — это инструмент для отслеживания момента ухода шапки с верхней позиции, позволяющий запускать эффекты и модификации элементов на ранней стадии скролла, до момента её скрытия или фиксации.

Оглавление