Параметр onNotBottom

В библиотеке Headroom.js параметр onNotBottom используется для обработки ситуации, когда пользователь перестаёт находиться в нижней части страницы. Этот параметр представляет собой функцию обратного вызова (callback), которая вызывается каждый раз, когда шапка перестаёт быть на нижнем краю документа после прокрутки.

Синтаксис

var headroom = new Headroom(element, {
    onNotBottom: function() {
        // логика, выполняемая при выходе из нижней позиции
    }
});
headroom.init();
  • element — HTML-элемент, на котором инициализируется Headroom, обычно это <header> или <nav>.
  • onNotBottom — функция без параметров, которая выполняется только при покидании нижней границы страницы.

Основное поведение

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

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

var header = document.querySelector("header");
var headroom = new Headroom(header, {
    tolerance: {
        up: 10,
        down: 10
    },
    onBottom: function() {
        header.style.backgroundColor = "transparent";
    },
    onNotBottom: function() {
        header.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
    }
});
headroom.init();

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

  • При достижении нижней границы страницы (onBottom) шапка становится прозрачной.
  • Когда пользователь прокручивает страницу вверх, выходя из нижней границы, срабатывает onNotBottom, и шапка получает полупрозрачный чёрный фон.

Особенности и тонкости

  1. Совместимость с другими параметрами Параметр onNotBottom не конфликтует с onTop, onNotTop, onUnpin и onPin. Он работает исключительно в отношении нижней границы страницы.

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

  3. Использование с динамическими элементами Если контент страницы динамически изменяется и высота документа увеличивается, Headroom автоматически корректирует срабатывание onNotBottom и onBottom. Это позволяет шапке оставаться реактивной к изменениям DOM.

  4. Интеграция с анимациями Функция onNotBottom часто используется для плавного включения анимаций при прокрутке вверх. Например, можно добавлять класс visible к шапке:

onNotBottom: function() {
    header.classList.add("visible");
}
  • В CSS для класса visible задаются анимации появления:
header {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
header.visible {
    transform: translateY(0);
    opacity: 1;
}

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

  • Использовать onNotBottom для изменения состояния шапки, когда нижний предел страницы больше не достигнут.
  • Для динамических страниц с подгружаемым контентом проверять корректность работы вместе с параметром tolerance — небольшая задержка предотвращает дергание интерфейса.
  • Совмещать с onBottom для создания интерактивных эффектов появления/исчезновения элементов.

Заключение по функционалу

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

Оглавление