onNotBottom для ухода с нижней позиции

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

Подключение и настройка

Для использования onNotBottom необходимо инициализировать Headroom на DOM-элементе, обычно на <header> или навигационной панели. Основная структура инициализации:

var header = document.querySelector("header");
var headroom = new Headroom(header, {
    tolerance: {
        up: 10,
        down: 10
    },
    offset: 50,
    onNotBottom: function() {
        console.log("Элемент ушёл с нижней позиции");
        // Дополнительная логика
    }
});
headroom.init();

Пояснение параметров:

  • tolerance — задаёт порог срабатывания при движении вверх и вниз. В данном случае событие onNotBottom срабатывает, если прокрутка превышает 10px.
  • offset — определяет расстояние от верхней границы страницы, при котором начинает работать Headroom.
  • onNotBottom — функция, вызываемая при уходе элемента с нижней границы.

Отличие onNotBottom от других коллбэков

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

  • onPin — срабатывает, когда элемент фиксируется в верхней части страницы.
  • onUnpin — когда элемент скрывается при прокрутке вниз.
  • onTop — когда элемент достиг верхней границы.
  • onNotTop — когда элемент покидает верхнюю границу.
  • onNotBottom — когда элемент перестаёт быть в нижней точке.

Особенность onNotBottom заключается в том, что оно может быть полезно для динамических интерфейсов с футером или элементами, закреплёнными снизу. Например, при прокрутке вниз фиксированная панель может исчезать, а при уходе с нижней позиции — появляться.

Практическое использование

  1. Появление кнопки “Наверх” только после ухода с нижней позиции:
var scrollTopBtn = document.querySelector("#scrollTop");

var headroom = new Headroom(document.querySelector("header"), {
    onNotBottom: function() {
        scrollTopBtn.classList.add("visible");
    },
    onBottom: function() {
        scrollTopBtn.classList.remove("visible");
    }
});

headroom.init();

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

  1. Изменение стилей футера при уходе с нижней позиции:
var footer = document.querySelector("footer");

var headroom = new Headroom(document.querySelector("header"), {
    onNotBottom: function() {
        footer.classList.remove("footer-bottom");
        footer.classList.add("footer-active");
    }
});

headroom.init();

Такой подход позволяет плавно переключать состояние футера без ручного отслеживания позиции скролла.

Взаимодействие с onBottom

Для корректной работы onNotBottom важно учитывать, что оно вызывается только при переходе из состояния “нижней позиции”. Это значит:

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

Пример комбинированной логики:

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

var headroom = new Headroom(document.querySelector("header"), {
    onBottom: function() {
        footer.style.opacity = 0.5;
    },
    onNotBottom: function() {
        footer.style.opacity = 1;
    }
});

headroom.init();

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

Советы по производительности

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

Итоговая структура использования

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

var headroom = new Headroom(header, {
    offset: 100,
    tolerance: { up: 5, down: 5 },
    onNotBottom: function() {
        // Логика при уходе с нижней позиции
    },
    onBottom: function() {
        // Логика при достижении нижней позиции
    }
});

headroom.init();

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

Оглавление