Affix 固钉
将页面元素固定在可视范围内，常用于侧边栏或顶部导航栏的固定。
基础用法
当页面滚动到目标位置时，元素将固定在视口中。
滚动页面查看固钉效果（第 1 段）
滚动页面查看固钉效果（第 2 段）
滚动页面查看固钉效果（第 3 段）
滚动页面查看固钉效果（第 4 段）
滚动页面查看固钉效果（第 5 段）
滚动页面查看固钉效果（第 6 段）
滚动页面查看固钉效果（第 7 段）
滚动页面查看固钉效果（第 8 段）
滚动页面查看固钉效果（第 9 段）
滚动页面查看固钉效果（第 10 段）
滚动页面查看固钉效果（第 11 段）
滚动页面查看固钉效果（第 12 段）
滚动页面查看固钉效果（第 13 段）
滚动页面查看固钉效果（第 14 段）
滚动页面查看固钉效果（第 15 段）
滚动页面查看固钉效果（第 16 段）
滚动页面查看固钉效果（第 17 段）
滚动页面查看固钉效果（第 18 段）
滚动页面查看固钉效果（第 19 段）
滚动页面查看固钉效果（第 20 段）
固定在底部
通过 position="bottom" 设置固定在页面底部。
滚动页面查看底部固钉效果（第 1 段）
滚动页面查看底部固钉效果（第 2 段）
滚动页面查看底部固钉效果（第 3 段）
滚动页面查看底部固钉效果（第 4 段）
滚动页面查看底部固钉效果（第 5 段）
滚动页面查看底部固钉效果（第 6 段）
滚动页面查看底部固钉效果（第 7 段）
滚动页面查看底部固钉效果（第 8 段）
滚动页面查看底部固钉效果（第 9 段）
滚动页面查看底部固钉效果（第 10 段）
滚动页面查看底部固钉效果（第 11 段）
滚动页面查看底部固钉效果（第 12 段）
滚动页面查看底部固钉效果（第 13 段）
滚动页面查看底部固钉效果（第 14 段）
滚动页面查看底部固钉效果（第 15 段）
滚动页面查看底部固钉效果（第 16 段）
滚动页面查看底部固钉效果（第 17 段）
滚动页面查看底部固钉效果（第 18 段）
滚动页面查看底部固钉效果（第 19 段）
滚动页面查看底部固钉效果（第 20 段）
指定容器
通过 target 指定固钉作用的滚动容器。
容器中的内容...
更多内容...
Affix API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
offset | 偏移量（px） | number | 0 |
position | 固定位置 | 'top' | 'bottom' | 'top' |
target | 容器元素选择器 | string | '' |
zIndex | 固定时的 z-index | number | 100 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
change | 固定状态变化 | (fixed: boolean) |
scroll | 滚动事件 | (scrollTop: number) |
Slots
| 插槽名 | 说明 |
|---|---|
default | 需要固定的内容 |