# Affix

- Page: https://jiguang132.com/resources/arco-design/docs/affix
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

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

```bash
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 |`-`|-|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt