Цепочки вызовов методов

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

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

Инициализация с цепочкой методов

Обычно создание экземпляра Headroom выглядит так:

var myElement = document.querySelector(".header");
var headroom  = new Headroom(myElement, {
  tolerance: 5,
  offset: 100,
  classes: {
    initial: "animated",
    pinned: "slideDown",
    unpinned: "slideUp"
  }
});
headroom.init();

С применением цепочки методов можно сразу инициализировать объект и настроить его:

new Headroom(document.querySelector(".header"), {
  tolerance: 5,
  offset: 100,
  classes: {
    initial: "animated",
    pinned: "slideDown",
    unpinned: "slideUp"
  }
}).init();

В этом примере метод init() вызывается прямо на объекте, созданном конструктором Headroom, что сокращает код и повышает читаемость.

Настройка событий через цепочки

Headroom.js поддерживает события жизненного цикла: onPin, onUnpin, onTop, onNotTop. Использование цепочек позволяет объединять их настройку в одном блоке:

new Headroom(document.querySelector(".header"), {
  tolerance: 10,
  offset: 50
})
.init()
.onPin(() => console.log("Меню закреплено"))
.onUnpin(() => console.log("Меню скрыто"))
.onTop(() => console.log("Верх страницы"))
.onNotTop(() => console.log("Не верх страницы"));

Каждый вызов onPin, onUnpin и так далее возвращает сам объект Headroom, что и делает цепочку возможной. Это облегчает добавление нескольких обработчиков без объявления промежуточных переменных.

Изменение конфигурации после инициализации

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

var header = new Headroom(document.querySelector(".header"))
  .init()
  .setTolerance(20)
  .setOffset(150);

Методы setTolerance и setOffset возвращают объект Headroom, поэтому их можно вызывать подряд, формируя цепочку, которая постепенно модифицирует параметры.

Комбинирование методов управления

Помимо инициализации и настройки, Headroom.js предоставляет методы для управления поведением шапки вручную: pin(), unpin(), destroy(). Их также можно использовать в цепочках:

var hr = new Headroom(document.querySelector(".header"), {
  offset: 200
}).init();

// Через цепочку можно сразу скрыть и затем показать меню
hr.unpin().pin();

Это позволяет создавать сложные сценарии поведения без необходимости многократного обращения к объекту.

Применение цепочек в динамическом интерфейсе

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

const header = new Headroom(document.querySelector(".header"))
  .init()
  .onPin(() => document.body.classList.add("header-visible"))
  .onUnpin(() => document.body.classList.remove("header-visible"));

// Динамическая смена оффсета при изменении размера окна
window.addEventListener("resize", () => {
  const newOffset = window.innerWidth > 1024 ? 100 : 50;
  header.setOffset(newOffset);
});

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