Affix 固钉
将页面元素固定在可视区域，常用于导航栏、工具栏或侧边栏的吸顶/吸底效果。
顶部固钉
设置 offsetTop 使元素在滚动到指定位置后固定在顶部。
↑ 向上滚动页面查看固钉效果
底部固钉
设置 offsetBottom 使元素固定在底部。
↓ 向下滚动页面查看固钉效果
固定状态回调
监听 change 事件，在固定状态变化时执行逻辑。
当前状态：未固定
滚动事件
监听 scroll 事件获取实时滚动信息。
scrollTop: 0，affixTop: 0
容器内固钉
通过 target 属性指定固钉的滚动容器，固钉仅在容器范围内生效。
第 1 行内容
第 2 行内容
第 3 行内容
第 4 行内容
第 5 行内容
第 6 行内容
第 7 行内容
第 8 行内容
第 9 行内容
第 10 行内容
第 11 行内容
第 12 行内容
第 13 行内容
第 14 行内容
第 15 行内容
第 16 行内容
第 17 行内容
第 18 行内容
第 19 行内容
第 20 行内容
禁用固钉
通过 disabled 属性临时禁用固钉功能。
切换开关 启用固钉
自定义层级
通过 z-index 控制固钉的堆叠层级。
默认 z-index 为 100，此处设为 999
多元素固钉
同时固定多个元素，使用不同的 offsetTop 值实现分层效果。
滚动页面查看分层固钉效果
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
offsetTop | number | 0 | 距离顶部偏移(px)，触发固定的位置 |
offsetBottom | number | — | 距离底部偏移(px)，设置后按底部计算 |
target | () => HTMLElement | null | — | 固钉的滚动容器，默认为视口 |
zIndex | number | 100 | 固钉元素的 z-index 层级 |
disabled | boolean | false | 是否禁用固钉功能 |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
change | (fixed: boolean) => void | 固定状态变化时触发 |
scroll | (info: { fixed, scrollTop, affixTop }) => void | 滚动时触发，返回实时滚动信息 |