开发预览更新于 2026-05-10

Affix 固钉

当滚动经过元素时让其切换为固定定位，常用于工具条 / 锚点 / 提交栏吸顶。

基础用法

offsetTop 设置吸顶后距离容器顶部的偏移；offsetBottom 反之。target 指定滚动容器，省略则监听 window。

前置文字 1

前置文字 2

前置文字 3

前置文字 4

前置文字 5

前置文字 6

后置文字 1

后置文字 2

后置文字 3

后置文字 4

后置文字 5

后置文字 6

后置文字 7

后置文字 8

后置文字 9

后置文字 10

后置文字 11

后置文字 12

后置文字 13

后置文字 14

后置文字 15

后置文字 16

后置文字 17

后置文字 18

后置文字 19

后置文字 20

后置文字 21

后置文字 22

后置文字 23

后置文字 24

后置文字 25

后置文字 26

后置文字 27

后置文字 28

后置文字 29

后置文字 30

<div class="scroll-root" style="height: 400px; overflow-y: auto;">
<CfAffix :offset-top="0" target=".scroll-root">
  <div class="toolbar">这一行会在滚动到顶部时吸住</div>
</CfAffix>
</div>

<div className="scroll-root" style={{ height: 400, overflowY: 'auto' }}>
<CfAffix offsetTop={0} target=".scroll-root">
  <div className="toolbar">这一行会在滚动到顶部时吸住</div>
</CfAffix>
</div>

API

属性	类型	默认值	说明
`offsetTop`	`number`	`—`	吸顶时距离容器顶部的像素偏移
`offsetBottom`	`number`	`—`	吸底时距离容器底部的像素偏移；与 `offsetTop` 二选一
`target`	`string`	`—`	滚动容器选择器；省略时监听 `window`
`zIndex`	`number`	`100`	固定后的层级