Метод init

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

Создание экземпляра Headroom

Для использования init необходимо сначала создать объект Headroom на основе DOM-элемента:

var header = document.querySelector('.header');
var headroom = new Headroom(header, {
  offset: 100,
  tolerance: {
    up: 5,
    down: 10
  },
  classes: {
    initial: 'headroom',
    pinned: 'headroom--pinned',
    unpinned: 'headroom--unpinned',
    top: 'headroom--top',
    notTop: 'headroom--not-top',
    bottom: 'headroom--bottom',
    notBottom: 'headroom--not-bottom'
  }
});

В этом примере создаётся новый экземпляр Headroom, где:

  • offset – расстояние в пикселях, после которого начнётся реакция на скролл.
  • tolerance – объект, задающий чувствительность при скролле вверх и вниз.
  • classes – набор CSS-классов, которые будут применяться к элементу в разных состояниях.

Вызов метода init

После создания экземпляра вызывается метод:

headroom.init();

Этот вызов выполняет несколько ключевых действий:

  1. Добавление начального класса К элементу добавляется класс headroom (или любой другой, указанный в конфигурации classes.initial). Он обозначает, что элемент готов к управлению состояниями.

  2. Подключение слушателей событий прокрутки и изменения размера окна Headroom.js подписывается на события scroll и resize, обеспечивая динамическую реакцию на изменения положения страницы. Это позволяет:

    • фиксировать элемент при прокрутке вниз;
    • скрывать элемент при прокрутке вверх;
    • корректно отслеживать положение в верхней и нижней частях страницы.

  3. Инициализация состояния элемента Метод вычисляет текущую позицию скролла и назначает соответствующий класс:

    • headroom--top или headroom--not-top;
    • headroom--bottom или headroom--not-bottom.

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

  4. Установка внутренних переменных и кэшей Headroom сохраняет:

    • текущую позицию скролла;
    • состояние закрепления (pinned или unpinned);
    • таймеры для контроля частоты срабатывания событий (throttle).

    Эти внутренние данные необходимы для корректной работы метода update, который вызывается при каждом событии прокрутки.

Параметры и конфигурация init

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

headroom.offset = 150;
headroom.tolerance = { up: 10, down: 5 };
headroom.classes.pinned = 'custom-pinned';
headroom.init();

После вызова init изменения в этих свойствах будут учитываться при следующем срабатывании событий скролла и ресайза.

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

Фиксированный шапка с исчезновением при скролле вниз:

var header = document.querySelector('.site-header');
var headroom = new Headroom(header, {
  offset: 50,
  tolerance: 5,
  classes: {
    initial: 'header',
    pinned: 'header--visible',
    unpinned: 'header--hidden'
  }
});
headroom.init();

В данном примере шапка будет скрываться при скролле вниз и появляться при скролле вверх, при этом добавление класса header--visible или header--hidden позволяет легко управлять анимациями через CSS.

Динамическое обновление конфигурации перед инициализацией:

var header = document.querySelector('.main-nav');
var headroom = new Headroom(header);
headroom.offset = 200;
headroom.classes.pinned = 'nav-shown';
headroom.init();

Такой подход позволяет использовать один и тот же DOM-элемент с разными поведениями без необходимости пересоздавать объект.

Особенности работы метода init

  • Метод безопасно можно вызывать несколько раз: повторный вызов не создаёт дублирующих обработчиков событий.
  • Инициализация корректно обрабатывает элементы, уже имеющие классы Headroom, предотвращая конфликты с существующим CSS.
  • Внутренняя логика init обеспечивает плавное переключение между состояниями pinned и unpinned без резких скачков, даже при быстрых скроллах.

Метод init является ядром Headroom.js, обеспечивая надёжную привязку к DOM-элементу и точное отслеживание пользовательского скролла. Его корректное использование позволяет реализовать как простое фиксированное меню, так и сложные анимации скрытия и появления элементов интерфейса.

Оглавление