Affix

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

Основные свойства Affix

  • offsetTop Определяет расстояние в пикселях от верхнего края окна до элемента, при котором он закрепляется. Например:

    <Affix offsetTop={10}>
  <Button type="primary">Закреплённая кнопка</Button>
</Affix>

    В этом примере кнопка будет фиксироваться, когда верх окна прокрутки достигнет 10 пикселей от верхнего края кнопки.

  • offsetBottom Альтернатива offsetTop, задаёт расстояние от нижнего края окна. Используется для закрепления элемента снизу:

    <Affix offsetBottom={20}>
  <Button type="primary">Фиксированная снизу кнопка</Button>
</Affix>

  • target Указывает элемент, относительно которого происходит привязка Affix. По умолчанию привязка идёт к window. Можно указать конкретный контейнер:

    const container = () => document.getElementById('scrollableDiv');
<Affix target={container} offsetTop={5}>
  <Button type="primary">Кнопка внутри контейнера</Button>
</Affix>

  • onChange Коллбэк, вызываемый при изменении состояния закрепления элемента. Принимает один аргумент: true — элемент закреплён, false — нет.

    <Affix offsetTop={50} onCha nge={affixed => console.log(affixed)}>
  <Button>Отслеживание закрепления</Button>
</Affix>

Использование Affix с другими компонентами

Компонент Affix хорошо интегрируется с различными элементами интерфейса, такими как Menu, Button, Tabs, Card. Например, можно создать закреплённую панель навигации:

<Affix offsetTop={0}>
  <Menu mode="horizontal" defaultSelectedKeys={['1']}>
    <Menu.Item key="1">Главная</Menu.Item>
    <Menu.Item key="2">О нас</Menu.Item>
    <Menu.Item key="3">Контакты</Menu.Item>
  </Menu>
</Affix>

Здесь меню будет оставаться вверху страницы при прокрутке.

Примеры сложных сценариев

1. Affix с динамическим контентом

Если содержимое страницы меняется динамически, можно использовать target для корректного поведения:

const container = () => document.getElementById('scrollContainer');

<Affix target={container} offsetTop={10}>
  <Button type="primary">Закреплённая кнопка в динамическом контейнере</Button>
</Affix>

Это позволяет элементу правильно фиксироваться внутри конкретного блока при прокрутке.

2. Affix с несколькими элементами

Несколько компонентов Affix на одной странице могут иметь разные offsetTop или offsetBottom для независимого закрепления:

<Affix offsetTop={10}>
  <Button type="primary">Верхняя кнопка</Button>
</Affix>

<Affix offsetBottom={20}>
  <Button type="dashed">Нижняя кнопка</Button>
</Affix>

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

3. Affix с анимацией

Хотя Affix по умолчанию не поддерживает анимацию появления/исчезновения, её можно реализовать через CSS-переходы и изменение классов при onChange:

<Affix offsetTop={100} onCha nge={affixed => {
  document.getElementById('myButton').classList.toggle('affixed', affixed);
}}>
  <Button id="myButton">Анимированная кнопка</Button>
</Affix>
#myButton.affixed {
  transition: all 0.3s ease;
  transform: scale(1.05);
}

Особенности и рекомендации

  • Производительность: Affix использует обработку события scroll, поэтому на страницах с большим количеством скроллируемых элементов нужно минимизировать лишние Affix-компоненты или использовать throttle/debounce для оптимизации.
  • Совместимость с CSS layout: При использовании Flex или Grid следует учитывать, что Affix позиционируется абсолютно относительно окна или target-контейнера, что может влиять на расположение соседних элементов.
  • Мобильные устройства: Проверять поведение на touch-сценариях, особенно при использовании offsetBottom, так как динамические изменения высоты экранной клавиатуры могут сдвигать фиксированные элементы.

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

Компонент Affix является мощным инструментом для создания удобного и предсказуемого интерфейса. Его свойства позволяют гибко закреплять элементы, интегрировать их в динамические контейнеры и отслеживать состояние закрепления. Использование Affix вместе с другими компонентами Ant Design повышает удобство навигации и улучшает пользовательский опыт.

Оглавление