---
title: Affix - 固钉
order: 2
path: /Affix
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 5
  title: 导航
  path: /nav
---

在指定的范围内，将元素固定不动

## 基本用法

基本用法，不设置固定位置时，当页面滚动元素不可见时，元素固定在页面最顶部。

<code src="./demos/base.tsx" background="#fff" height="400px"/>

## 顶部固定

元素向上滚动到距顶部一定距离时固定。

<code src="./demos/offsetTop.tsx" background="#fff" height="400px"/>

## 底部固定

元素向下滚动到距底部一定距离时固定。

<code src="./demos/offsetBottom.tsx" background="#fff" height="400px"/>

## 滚动容器

适用于较为复杂的场景，元素固定位置会受容器位置的影响。

<code src="./demos/containerAffix.tsx" background="#fff" height="400px"/>

## API

| 成员         | 说明                                                                   | 类型                        | 默认值       |
| ------------ | ---------------------------------------------------------------------- | --------------------------- | ------------ |
| offsetBottom | 距离窗口底部达到指定偏移量后触发                                       | number                      | -            |
| offsetTop    | 距离窗口顶部达到指定偏移量后触发                                       | number                      | 0            |
| target       | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement           | () => window |
| onChange     | 固定状态改变时触发的回调函数                                           | (affixed?: boolean) => void | -            |

**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：