Использование в React

Для работы с Headroom.js в React необходимо установить библиотеку через npm или yarn:

npm install headroom.js
# или
yarn add headroom.js

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

import React, { useRef, useEffect } from 'react';
import Headroom from 'headroom.js';

const Header = () => {
  const headerRef = useRef(null);

  useEffect(() => {
    const headroom = new Headroom(headerRef.current);
    headroom.init();

    return () => {
      headroom.destroy();
    };
  }, []);

  return (
    

      Навигация сайта
    

  );
};

export default Header;

Ключевые моменты:

  • useRef используется для получения прямого доступа к DOM-элементу.
  • useEffect гарантирует, что инициализация Headroom произойдет после рендера.
  • headroom.destroy() освобождает ресурсы при размонтировании компонента, предотвращая утечки памяти.

Настройка параметров Headroom.js

Headroom.js поддерживает широкий набор параметров для управления поведением заголовка. В React их можно передавать при создании экземпляра.

const options = {
  tolerance: {
    up: 10,
    down: 20
  },
  offset: 50,
  classes: {
    initial: 'headroom',
    pinned: 'headroom--pinned',
    unpinned: 'headroom--unpinned',
    top: 'headroom--top',
    notTop: 'headroom--not-top'
  }
};

useEffect(() => {
  const headroom = new Headroom(headerRef.current, options);
  headroom.init();
  return () => headroom.destroy();
}, []);

Объяснение параметров:

  • tolerance – количество пикселей, которые пользователь может прокрутить, прежде чем заголовок изменит состояние. Можно задать отдельные значения для прокрутки вверх и вниз.

  • offset – расстояние от верхней границы страницы, при достижении которого активируется скрытие или показ заголовка.

  • classes – объект с CSS-классами для различных состояний заголовка:

    • initial – базовый класс.
    • pinned – когда заголовок закреплен.
    • unpinned – когда заголовок скрыт.
    • top – когда страница находится в начале.
    • notTop – когда страница прокручена вниз.

Создание обертки для повторного использования

Для удобства можно создать компонент Higher-Order Component (HOC) или кастомный компонент HeadroomWrapper:

import React, { useRef, useEffect } from 'react';
import Headroom from 'headroom.js';

const HeadroomWrapper = ({ children, options }) => {
  const ref = useRef(null);

  useEffect(() => {
    const headroom = new Headroom(ref.current, options);
    headroom.init();

    return () => headroom.destroy();
  }, [options]);

  return 
{children}
;
};

export default HeadroomWrapper;

Использование:


  
Главное меню

Такой подход обеспечивает централизованное управление поведением всех заголовков и упрощает поддержку кода.

Интеграция с функциональными эффектами

Headroom.js можно комбинировать с React-хуками для изменения состояния приложения в зависимости от поведения заголовка:

import React, { useRef, useEffect, useState } from 'react';
import Headroom from 'headroom.js';

const Header = () => {
  const headerRef = useRef(null);
  const [pinned, setPinned] = useState(true);

  useEffect(() => {
    const headroom = new Headroom(headerRef.current);

    headroom.on('pin', () => setPinned(true));
    headroom.on('unpin', () => setPinned(false));

    headroom.init();
    return () => headroom.destroy();
  }, []);

  return (
    

      Меню
    

  );
};

Особенности:

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

Работа с анимациями и CSS

Headroom.js ориентирован на работу через CSS-классы. Для плавного скрытия и появления заголовка рекомендуется использовать transitions:

.header {
  transition: transform 0.3s ease-in-out;
}

.headroom--unpinned {
  transform: translateY(-100%);
}

.headroom--pinned {
  transform: translateY(0);
}

Рекомендации:

  • Использовать transform вместо изменения top или margin, так как это более производительно.
  • Настроить одинаковую длительность transition для всех состояний, чтобы не возникало рывков.
  • При использовании React с CSS-модулями или styled-components следует учитывать динамическое присваивание классов из Headroom.

Поддержка нескольких заголовков

Headroom.js можно использовать одновременно с несколькими элементами на странице. Каждый элемент получает отдельный реф и инициализацию:

const headers = [useRef(null), useRef(null)];

useEffect(() => {
  const instances = headers.map(ref => {
    const headroom = new Headroom(ref.current);
    headroom.init();
    return headroom;
  });

  return () => instances.forEach(h => h.destroy());
}, []);

Такой подход подходит для страниц с фиксированными панелями или несколькими навигационными блоками.

Оглавление