Инициализация через jQuery

Для интеграции Headroom.js с jQuery необходимо убедиться, что обе библиотеки подключены на странице. Обычно это делается через <script> в HTML. Сначала подключается jQuery, затем Headroom.js:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.12.0/headroom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.12.0/jQuery.headroom.min.js"></script>

Важно соблюдать порядок подключения: jQuery должен быть загружен до jQuery-плагина Headroom, иначе метод headroom() не будет доступен.

Инициализация через jQuery

Использование Headroom.js через jQuery упрощает синтаксис и позволяет работать с элементами DOM так же, как с любым другим jQuery-плагином. Основная конструкция выглядит следующим образом:

$(document).ready(function() {
    $("#header").headroom({
        "tolerance": 5,
        "offset": 50,
        "classes": {
            "initial": "headroom",
            "pinned": "headroom--pinned",
            "unpinned": "headroom--unpinned",
            "top": "headroom--top",
            "notTop": "headroom--not-top",
            "bottom": "headroom--bottom",
            "notBottom": "headroom--not-bottom"
        }
    });
});

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

  • tolerance – количество пикселей, которое пользователь должен прокрутить, чтобы триггер сработал. Может быть числом или объектом {up: 5, down: 10} для разных значений при скролле вверх и вниз.
  • offset – вертикальное смещение в пикселях, после которого Headroom начинает работу.
  • classes – объект, задающий CSS-классы для различных состояний элемента. Позволяет гибко настраивать визуальные эффекты при закреплении, скрытии или достижении верха/низа страницы.

Настройка событий

Headroom.js через jQuery поддерживает привязку к событиям. Это позволяет выполнять дополнительные действия при изменении состояния элемента:

$("#header").on("headroom.pinned", function() {
    console.log("Хедер закреплён");
});

$("#header").on("headroom.unpinned", function() {
    console.log("Хедер скрыт");
});

События:

  • headroom.pinned – хедер видим и закреплён.
  • headroom.unpinned – хедер скрыт при прокрутке вниз.
  • headroom.top – хедер достиг верха страницы.
  • headroom.notTop – хедер ушёл от верха страницы.
  • headroom.bottom – хедер достиг низа страницы.
  • headroom.notBottom – хедер покинул нижнюю границу.

Работа с несколькими элементами

jQuery позволяет применять Headroom.js сразу к группе элементов:

$(".sticky-header").headroom({
    "tolerance": {up: 10, down: 20},
    "offset": 100
});

Каждый элемент из выборки получает независимый экземпляр Headroom, поэтому события и классы работают индивидуально.

Динамическое управление

Через jQuery можно управлять экземпляром Headroom после инициализации:

var header = $("#header");

// Получение экземпляра
var headroomInstance = header.data("headroom");

// Включение и отключение
headroomInstance.disable();
headroomInstance.enable();

// Принудительное скрытие или показ
headroomInstance.unpin();
headroomInstance.pin();

Это полезно для изменения поведения хедера в зависимости от состояния страницы или пользовательских действий.

Интеграция с анимациями CSS

С помощью классов pinned и unpinned можно подключать CSS-анимации для плавного появления и скрытия хедера:

.headroom {
    transition: transform 0.3s ease-in-out;
}

.headroom--unpinned {
    transform: translateY(-100%);
}

.headroom--pinned {
    transform: translateY(0);
}

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

Пример комплексной настройки

$(function() {
    $("#header").headroom({
        tolerance: {up: 15, down: 5},
        offset: 80,
        classes: {
            initial: "headroom",
            pinned: "headroom--pinned",
            unpinned: "headroom--unpinned",
            top: "headroom--top",
            notTop: "headroom--not-top"
        },
        onPin: function() {
            console.log("Показ хедера");
        },
        onUnpin: function() {
            console.log("Скрытие хедера");
        }
    });
});

В этом примере одновременно используются динамическое управление, события и кастомные классы, что позволяет полностью контролировать поведение хедера при скролле страницы.

Оглавление