Параметр onBottom

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

Синтаксис использования

var myElement = document.querySelector("#header");
var headroom = new Headroom(myElement, {
    onBottom: function() {
        console.log("Достигнут нижний предел прокрутки!");
    }
});
headroom.init();

Здесь onBottom принимает функцию обратного вызова (callback), которая вызывается каждый раз, когда элемент фиксированного заголовка прокручен до низа страницы.

Особенности работы

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

Интеграция с другими коллбеками

Headroom.js позволяет использовать несколько коллбеков одновременно:

  • onPin – срабатывает, когда заголовок фиксируется при прокрутке вверх.
  • onUnpin – срабатывает при скрытии заголовка при прокрутке вниз.
  • onTop – срабатывает при достижении верхней границы.
  • onBottom – срабатывает при достижении нижней границы.

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

Пример комбинированного использования:

var header = document.querySelector("#header");
var headroom = new Headroom(header, {
    offset: 50,
    tolerance: 5,
    onPin: function() { console.log("Заголовок закреплен"); },
    onUnpin: function() { console.log("Заголовок скрыт"); },
    onBottom: function() { console.log("Прокрутка достигла низа страницы"); }
});
headroom.init();

Практические сценарии применения

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

  2. Изменение стиля заголовка При достижении нижней границы можно изменить оформление хедера или футера:

onBottom: function() {
    document.querySelector("#header").classList.add("bottom-reached");
}
  1. Активация анимаций или уведомлений Можно запускать визуальные эффекты или уведомления о том, что пользователь достиг конца контента.

Важные нюансы

  • Для корректной работы onBottom контейнер должен иметь отрицательный маржин или padding корректно выставленный, чтобы библиотека могла определить реальную нижнюю границу.
  • Высота содержимого страницы влияет на срабатывание коллбека. Если контент меньше высоты окна, onBottom может активироваться сразу после загрузки.
  • В сочетании с параметром offset можно задавать порог срабатывания чуть выше или ниже абсолютного низа.

Настройка порога срабатывания

var headroom = new Headroom(header, {
    offset: 200, // отступ в пикселях до нижнего края
    onBottom: function() { console.log("Ближе к нижнему краю"); }
});

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

Пример динамической подгрузки с onBottom

var header = document.querySelector("#header");
var headroom = new Headroom(header, {
    onBottom: function() {
        fetch("/loadMore")
            .then(res => res.text())
            .then(html => {
                document.querySelector("#content").innerHTML += html;
            });
    }
});
headroom.init();

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

Оглавление