Полный список событий и коллбэков

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

Основные события Headroom.js

Headroom.js использует четыре основных события, каждое из которых соответствует определённому поведению шапки при скролле:

1. pin Срабатывает, когда шапка фиксируется и остаётся видимой на экране после скролла вверх. Пример использования:

   var header = document.querySelector("#header");
   var headroom = new Headroom(header);
   
   headroom.init();
   
   header.addEventListener("headroom:pin", function() {
       console.log("Шапка зафиксирована и видима");
   });

2. unpin Срабатывает, когда шапка скрывается при скролле вниз. Это позволяет динамически изменять внешний вид страницы, освобождая место для контента. Пример:

   header.addEventListener("headroom:unpin", function() {
       console.log("Шапка скрыта");
   });

3. top Вызывается, когда пользователь прокрутил страницу полностью вверх. Это событие полезно для восстановления исходного состояния шапки.

   header.addEventListener("headroom:top", function() {
       console.log("Страница на самом верху");
   });

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

   header.addEventListener("headroom:notTop", function() {
       console.log("Страница прокручена вниз от верха");
   });

Настройка коллбэков через конфигурацию

Headroom.js позволяет задавать коллбэки не только через события DOM, но и непосредственно в конфигурации при создании экземпляра:

var headroom = new Headroom(header, {
    tolerance: 5,
    offset: 100,
    onPin: function() {
        console.log("Коллбэк onPin вызван");
    },
    onUnpin: function() {
        console.log("Коллбэк onUnpin вызван");
    },
    onTop: function() {
        console.log("Коллбэк onTop вызван");
    },
    onNotTop: function() {
        console.log("Коллбэк onNotTop вызван");
    }
});

headroom.init();

Особенности работы коллбэков:

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

Расширенные события и методы

Кроме стандартных коллбэков, Headroom.js предоставляет следующие возможности:

• Методы управления состоянием вручную:

  headroom.pin();   // зафиксировать шапку
  headroom.unpin(); // скрыть шапку
  headroom.destroy(); // полностью удалить Headroom с элемента
  headroom.isPinned(); // вернуть true, если шапка зафиксирована
  headroom.isUnpinned(); // вернуть true, если шапка скрыта

• События DOM для кастомной интеграции: Можно создавать свои обработчики на базе событий headroom:pin и headroom:unpin для синхронизации с другими скриптами.

Передача параметров коллбэков

Коллбэки принимают контекст элемента this, с которым работает Headroom.js. Это позволяет управлять DOM напрямую:

var headroom = new Headroom(header, {
    onPin: function() {
        this.classList.add("pinned");
    },
    onUnpin: function() {
        this.classList.remove("pinned");
        this.classList.add("unpinned");
    }
});
headroom.init();

В этом примере this ссылается на элемент шапки, поэтому можно динамически добавлять и удалять CSS-классы без дополнительного поиска элемента в DOM.

Практические сценарии использования событий

1. Анимация шапки при прокрутке: Добавление и удаление CSS-классов для плавного скрытия/появления шапки.
2. Изменение стиля контента: Например, уменьшение размеров логотипа или смена цвета фона при pin/unpin.
3. Ленивая загрузка элементов: Запуск анимаций или подгрузки данных только когда шапка скрыта (unpin) или видна (pin).
4. Отслеживание позиции страницы: Использование top и notTop для переключения навигационных элементов или отображения кнопки «Наверх».

Итоговая структура событий и коллбэков

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