Множественные элементы с разными настройками

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

Инициализация нескольких элементов

Для каждого элемента создаётся отдельный экземпляр Headroom. Например:

const header = document.querySelector('.header');
const notificationBar = document.querySelector('.notification-bar');

const headroomHeader = new Headroom(header, {
  tolerance: 10,
  offset: 50,
  classes: {
    initial: "header--init",
    pinned: "header--pinned",
    unpinned: "header--unpinned",
  }
});

const headroomNotification = new Headroom(notificationBar, {
  tolerance: 5,
  offset: 100,
  classes: {
    initial: "notification--init",
    pinned: "notification--pinned",
    unpinned: "notification--unpinned",
  }
});

headroomHeader.init();
headroomNotification.init();

В этом примере header и notificationBar управляются независимо. Ключевой момент — каждый элемент получает свой набор классов и свои параметры tolerance и offset.

Настройка поведения через tolerance и offset

  • tolerance — число пикселей, на которое пользователь должен прокрутить страницу, прежде чем элемент изменит состояние. Для одного элемента оно может быть минимальным, чтобы реагировать быстро, а для другого — большим, чтобы не дергался при мелкой прокрутке.
  • offset — расстояние от верхнего края страницы, при достижении которого активируется логика скрытия/появления. Позволяет задать элементы, которые будут вести себя по-разному на старте.

Индивидуальные CSS-классы для каждого элемента

Headroom.js применяет классы к элементу для управления стилями через CSS. Использование разных классов позволяет сделать элементы визуально уникальными при одинаковом поведении прокрутки. Например:

.header--pinned {
  transform: translateY(0);
  transition: transform 0.3s ease-in-out;
}

.notification--pinned {
  transform: translateY(0);
  transition: transform 0.1s ease-in-out;
  background-color: #fffae6;
}

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

Использование событий для множественных элементов

Каждый экземпляр Headroom может подписываться на события: pin, unpin, top, notTop, bottom, notBottom. Это позволяет синхронизировать действия между элементами:

headroomHeader.on("unpin", () => {
  console.log("Header скрыт");
});

headroomNotification.on("pin", () => {
  console.log("Notification показан");
});

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

Примеры комбинированных сценариев

  1. Фиксированное меню и скрывающаяся панель уведомлений

    • Меню всегда закреплено сверху (offset: 0), реагирует плавно (tolerance: 5).
    • Панель уведомлений скрывается только после прокрутки на 100px (offset: 100), реагирует резко (tolerance: 20).

  2. Кнопка “Наверх” с динамическим появлением

    • Создаётся отдельный Headroom для кнопки.
    • Кнопка появляется только после прокрутки 300px и быстро исчезает при движении вверх.
const backToTop = document.querySelector('.back-to-top');
const headroomBack = new Headroom(backToTop, {
  offset: 300,
  tolerance: { up: 0, down: 0 },
  classes: {
    initial: "back-top--init",
    pinned: "back-top--visible",
    unpinned: "back-top--hidden"
  }
});
headroomBack.init();

Рекомендации по организации кода

  • Создавать отдельные экземпляры Headroom для каждого элемента, не объединяя их в один.
  • Поддерживать отдельные CSS-классы, чтобы избежать конфликтов визуальных состояний.
  • Использовать объектные значения для tolerance, когда нужно разное поведение для прокрутки вверх и вниз:
tolerance: { up: 10, down: 5 }
  • В сложных макетах можно хранить все экземпляры в массиве для массовой инициализации или последующей деинициализации:
const elements = [
  { el: '.header', options: { offset: 50 } },
  { el: '.notification-bar', options: { offset: 100 } }
];

const headrooms = elements.map(item => {
  const hr = new Headroom(document.querySelector(item.el), item.options);
  hr.init();
  return hr;
});

Такой подход позволяет централизованно управлять поведением множества элементов на странице.

Совместимость и производительность

Headroom.js легковесен и оптимизирован, поэтому несколько экземпляров на странице не приводят к значительным потерям производительности. Главное — избегать сложных операций внутри обработчиков событий pin/unpin, чтобы не замедлять прокрутку.

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

Оглавление