Полный список параметров конфигурации

Headroom.js — это легкая библиотека для управления поведением шапки страницы при скролле. Для точной настройки её работы используется объект конфигурации при инициализации. Рассмотрим каждый параметр подробно.

tolerance

  • Тип: number | { up: number, down: number }
  • Описание: Определяет чувствительность шапки к прокрутке. Значение указывает, на сколько пикселей необходимо проскроллить, чтобы сработало скрытие или показ.
  • Пример использования:
var headroom = new Headroom(header, {
  tolerance: 10
});
  • Расширенный вариант: можно задавать отдельные значения для прокрутки вверх и вниз.
var headroom = new Headroom(header, {
  tolerance: {
    up: 5,
    down: 20
  }
});

offset

  • Тип: number
  • Описание: Определяет смещение в пикселях от верхней границы страницы, после которого начнется отслеживание скролла. Если значение равно нулю, шапка реагирует сразу.
  • Пример:
var headroom = new Headroom(header, {
  offset: 100
});
  • Значение 100 означает, что шапка будет скрываться/появляться только после прокрутки на 100 пикселей.

classes

  • Тип: object

  • Описание: Позволяет задавать собственные CSS-классы для разных состояний шапки.

  • Стандартные свойства объекта classes:

    • initial — класс, добавляемый при инициализации.
    • pinned — класс при показанной шапке.
    • unpinned — класс при скрытой шапке.
    • top — класс, когда страница находится в начале.
    • notTop — класс, когда страница проскроллена вниз.
    • bottom — класс при достижении низа страницы.
    • notBottom — класс, когда пользователь не на дне страницы.

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

var headroom = new Headroom(header, {
  classes: {
    initial: "headroom",
    pinned: "headroom--pinned",
    unpinned: "headroom--unpinned",
    top: "headroom--top",
    notTop: "headroom--not-top",
    bottom: "headroom--bottom",
    notBottom: "headroom--not-bottom"
  }
});
  • Использование кастомных классов позволяет полностью контролировать анимацию и визуальное поведение шапки через CSS.

onPin, onUnpin, onTop, onNotTop, onBottom, onNotBottom

  • Тип: function
  • Описание: Коллбэки, вызываемые при смене состояния шапки. Позволяют выполнять дополнительные действия, например анимацию других элементов страницы или логирование событий.
  • Пример:
var headroom = new Headroom(header, {
  onPin: function() { console.log("Шапка показана"); },
  onUnpin: function() { console.log("Шапка скрыта"); },
  onTop: function() { console.log("На верху страницы"); },
  onNotTop: function() { console.log("Прокрутка вниз"); }
});
  • Эти функции могут использоваться для интеграции с другими скриптами, например изменением цвета шапки или запуском сторонних анимаций.

scroller

  • Тип: function
  • Описание: Позволяет задать кастомный объект для отслеживания скролла вместо window. Полезно для внутренних контейнеров с прокруткой.
  • Пример:
var headroom = new Headroom(header, {
  scroller: function() {
    return document.querySelector(".scrollable-container");
  }
});
  • Это особенно важно для одностраничных приложений, где основной контент находится в отдельном scrollable div.

onInitialize

  • Тип: function
  • Описание: Коллбэк, вызываемый один раз после инициализации Headroom.js.
  • Пример:
var headroom = new Headroom(header, {
  onInitialize: function() {
    console.log("Headroom инициализирован");
  }
});
  • Этот метод подходит для выполнения начальных настроек, таких как добавление начальных стилей или логирование.

classes.transform и classes.transformed

  • Тип: string
  • Описание: Позволяют задать свои классы для управления трансформацией через CSS. Определяются для реализации кастомных анимаций через свойства transform.
  • Пример:
var headroom = new Headroom(header, {
  classes: {
    initial: "headroom",
    transformed: "headroom--transformed"
  }
});
  • Настройка этих классов позволяет использовать сложные CSS-анимации при показе и скрытии шапки.

scroller с кастомным событием

  • Можно использовать не только стандартное событие scroll, но и кастомные события для обновления состояния шапки:
var headroom = new Headroom(header, {
  scroller: function() { return document.querySelector(".custom-scroll"); }
});
headroom.init();
document.querySelector(".custom-scroll").addEventListener("scroll", function() {
  headroom.update();
});
  • Такой подход обеспечивает полную гибкость для приложений с динамически изменяемыми контейнерами.

Итоговая структура объекта конфигурации

var headroom = new Headroom(header, {
  tolerance: { up: 5, down: 20 },
  offset: 100,
  scroller: function() { return document.querySelector(".scrollable-container"); },
  classes: {
    initial: "headroom",
    pinned: "headroom--pinned",
    unpinned: "headroom--unpinned",
    top: "headroom--top",
    notTop: "headroom--not-top",
    bottom: "headroom--bottom",
    notBottom: "headroom--not-bottom"
  },
  onInitialize: function() { console.log("Инициализация"); },
  onPin: function() { console.log("Показана"); },
  onUnpin: function() { console.log("Скрыта"); },
  onTop: function() { console.log("На верху"); },
  onNotTop: function() { console.log("Прокрутка вниз"); }
});
headroom.init();
  • Эта конфигурация демонстрирует использование всех ключевых параметров для полного контроля поведения шапки страницы.
Оглавление