Affix

Pin the elements to the visible range. When the content area is relatively long and the page needs to scroll, the Affix can fix the element on the screen. Often used for side menu and button group.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Basic usage. If the fixed position is not set, the element will be fixed at the top of the page when it scrolls outside the page.
Fixed Top: The element will be fixed when it scrolls down to a certain distance from the top of the viewport.
Fixed Bottom: The element will be fixed when it scrolls down to a certain distance from the bottom of the viewport.
Callback: Callback when the fixed state changes.
Container: Use target to set the element whose scroll event needs to be listened to. The default value is window. If target is specified as a non-window container, the fixed element may escape the container when the outer element scrolls. You can pass in targetContainer to set the scrollable element outside target. Affix will listen to the scroll event of the element and update the position of Affix correspondingly. You can also listen to the scroll event of the outer scrollable element and call this.affixRef.updatePosition() to update the position.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Affix

Property	Description	Type	DefaultValue	Version
offsetBottom	Offset from the bottom of the viewport (in pixels)	number	`-`	-
offsetTop	Offset from the top of the viewport (in pixels)	number	`0`	-
affixClassName	ClassName of the fixed element.	string \| string[]	`-`	2.8.0
affixStyle	Style of the fixed elements. Don't set `position` `top` `width` `height` attributes as they are used for positioning when the element is fixed.	CSSProperties	`-`	2.8.0
className	Additional css class	string \| string[]	`-`	-
style	Additional style	CSSProperties	`-`	-
onChange	Callback fired when Affix state is changed	(affixed: boolean) => void	`-`	-
target	Specifies the scrollable area DOM Element	() => HTMLElement \| null \| Window	`() => window`	-
targetContainer	Outer scrollable DOM element of `target`. `Affix` will listen to the container's scroll event and update the its position correspondingly.It's to solve the problem that Affix may escape the container when the container is not `window`.	() => HTMLElement \| null \| Window	`-`	-