Affix

Components such as navigation, buttons, etc. can be fixed in the visible range. Commonly used for pages with long content, fixed the specified elements in the visible range of the page to assist in quick operation.

Import

import { Affix } from 'rsuite';

//or
import Affix from 'rsuite/Affix';

Examples

Default

Top

Container

When the container is in the visible range, the element is fixed. When the scrolling page container is not in the visible range, the element is unfixed.

Props

<Affix>

Property Type(Default) Description
children ReactNode Fixed element.
classPrefix string ('affix') The prefix of the component CSS class.
container HTMLElement | (() => HTMLElement) Specify the container. An element can only be fixed when the container is in the visible range.
onChange (fixed: boolean) => voide Callback function when non-fixed and fixed state changes.
top number (0) Set the fixed top height.