固钉 Affix
将页面元素钉在可视范围。当内容区域比较长，需要滚动页面时，固钉可以将内容固定在屏幕上。常用于侧边菜单和按钮组合。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基本用法：基本用法，不设置固定位置时，当页面滚动元素不可见时，元素固定在页面最顶部。
- 顶部固定：元素向上滚动到距顶部一定距离时固定。
- 底部固定：元素向下滚动到距底部一定距离时固定。
- 固定状态改变回调：当固定状态发生改变时，会触发事件。
- 滚动容器：用
target设置需要监听其滚动事件的元素，默认为window。target指定为非 window 容器时，可能会出现target外层元素滚动，固钉元素跑出滚动容器的问题。这个时候可以通过传入targetContainer设置target外层的滚动元素。Affix会监听该元素的滚动事件来实时更新滚钉元素的位置。也可以在业务代码中自己监听target外层滚动元素的scroll事件，并调用this.affixRef.updatePosition()去更新固钉的位置。
示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。
API
Affix
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - | - |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | 0 | - |
| affixClassName | 给 fixed 的元素设置 className。 | string | string[] | - | 2.8.0 |
| affixStyle | 给 fixed 的元素设置 style，注意不要设置 position top width height， 因为这几个属性是在元素 fixed 时候用于定位的。 | CSSProperties | - | 2.8.0 |
| className | 节点类名 | string | string[] | - | - |
| style | 节点样式 | CSSProperties | - | - |
| onChange | 固定状态发生改变时触发 | (affixed: boolean) => void | - | - |
| target | 滚动容器 | () => HTMLElement | null | Window | () => window | - |
| targetContainer | target 的外层滚动元素。Affix 将会监听该元素的滚动事件，并实时更新固钉的位置。主要是为了解决 target 属性指定为非 window 元素时，如果外层元素滚动，可能会导致固钉跑出容器问题。 | () => HTMLElement | null | Window | - | - |