Параметр onNotTop

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

Синтаксис

var headroom = new Headroom(element, {
  onNotTop: function() {
    // Действия, когда страница не вверху
  }
});

headroom.init();
  • element – DOM-элемент, к которому применяется Headroom (обычно <header> или <nav>).
  • onNotTop – функция, вызываемая при условии, что прокрутка страницы сместилась от верхней границы.

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

Headroom.js отслеживает положение страницы с помощью события scroll. При каждом событии происходит проверка позиции прокрутки:

  1. Если scrollTop === 0 → активируется onTop.
  2. Если scrollTop > 0 → активируется onNotTop.

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

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

Добавление класса при прокрутке

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

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

headroom.init();

В этом примере:

  • Когда пользователь начинает прокрутку вниз, к элементу <header> добавляется класс scrolled.
  • Когда пользователь возвращается к верху страницы, класс удаляется.
  • Этот приём позволяет изменять внешний вид шапки динамически.

Реакция на фиксирование заголовка

var nav = document.querySelector(".navbar");

var headroom = new Headroom(nav, {
  offset: 50,
  onNotTop: function() {
    nav.style.boxShadow = "0 4px 6px rgba(0,0,0,0.1)";
  },
  onTop: function() {
    nav.style.boxShadow = "none";
  }
});

headroom.init();

Здесь:

  • Используется параметр offset для задержки срабатывания эффекта.
  • onNotTop добавляет тень, когда навигация отходит от верха.
  • onTop убирает тень при возвращении к верхней границе.

Особенности использования

  1. Срабатывание при каждом событии прокрутки, когда позиция не вверху. Чтобы избежать лишних вызовов, внутри функции можно проверять текущий статус или использовать debounce.
  2. Часто используется в паре с onTop, чтобы создавать плавные переходы стилей.
  3. Можно комбинировать с параметрами onPin и onUnpin, чтобы управлять поведением шапки при прокрутке вниз и вверх.

Советы по оптимизации

  • Если функция внутри onNotTop выполняет тяжелые операции (например, запросы к DOM или изменение больших блоков), рекомендуется обернуть её в requestAnimationFrame или использовать debounce.
  • Для визуальных эффектов лучше использовать CSS-классы, а не прямое изменение стиля через JavaScript. Это повышает производительность и упрощает поддержку.
  • Следует учитывать, что onNotTop срабатывает даже при минимальном смещении вниз, поэтому часто используют параметр offset, чтобы задать порог, после которого колбэк должен срабатывать.

Пример интеграции с анимацией

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

var headroom = new Headroom(header, {
  offset: 100,
  onNotTop: function() {
    header.classList.add("fade-in");
    header.classList.remove("fade-out");
  },
  onTop: function() {
    header.classList.remove("fade-in");
    header.classList.add("fade-out");
  }
});

headroom.init();
  • Использование классов fade-in и fade-out позволяет плавно анимировать появление и исчезновение шапки.
  • Колбэк onNotTop обеспечивает срабатывание анимации при смещении от верхней границы, без необходимости самостоятельно отслеживать положение прокрутки.

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

Оглавление