当内容滚出这个浅色容器的范围后，固钉会自动退出，避免跨区域悬浮。
Affix 固钉
xy-affix 用于把按钮、筛选摘要、操作卡片这类"小块但需要跟随可见区域"的内容固定在页面顶部或底部。支持 teleported、append-to、change / scroll 和 update / updateRoot。
基础偏移
默认吸附在顶部。请向下滚动页面，观察工具条在越过阈值后固定到视口顶部。
跟进卡片 1
滚动页面时，顶部操作会保持可见，适合审批流、筛选摘要和页面内快捷入口。
跟进卡片 2
滚动页面时，顶部操作会保持可见，适合审批流、筛选摘要和页面内快捷入口。
跟进卡片 3
滚动页面时，顶部操作会保持可见，适合审批流、筛选摘要和页面内快捷入口。
跟进卡片 4
滚动页面时，顶部操作会保持可见，适合审批流、筛选摘要和页面内快捷入口。
跟进卡片 5
滚动页面时，顶部操作会保持可见，适合审批流、筛选摘要和页面内快捷入口。
跟进卡片 6
滚动页面时，顶部操作会保持可见，适合审批流、筛选摘要和页面内快捷入口。
跟进卡片 7
滚动页面时，顶部操作会保持可见，适合审批流、筛选摘要和页面内快捷入口。
跟进卡片 8
滚动页面时，顶部操作会保持可见，适合审批流、筛选摘要和页面内快捷入口。
跟进卡片 9
滚动页面时，顶部操作会保持可见，适合审批流、筛选摘要和页面内快捷入口。
跟进卡片 10
滚动页面时，顶部操作会保持可见，适合审批流、筛选摘要和页面内快捷入口。
Change 事件状态面板
这个示例会把 change 和 scroll 事件直接显示出来。滚动后无需靠肉眼猜测，状态面板会实时告诉你当前是否已固定。
当前状态：未固定change 次数：0scrollTop：0
状态检查项 1
如果顶部摘要条进入固定态，状态面板会立即从“未固定”切到“已固定”。
状态检查项 2
如果顶部摘要条进入固定态，状态面板会立即从“未固定”切到“已固定”。
状态检查项 3
如果顶部摘要条进入固定态，状态面板会立即从“未固定”切到“已固定”。
状态检查项 4
如果顶部摘要条进入固定态，状态面板会立即从“未固定”切到“已固定”。
状态检查项 5
如果顶部摘要条进入固定态，状态面板会立即从“未固定”切到“已固定”。
状态检查项 6
如果顶部摘要条进入固定态，状态面板会立即从“未固定”切到“已固定”。
状态检查项 7
如果顶部摘要条进入固定态，状态面板会立即从“未固定”切到“已固定”。
状态检查项 8
如果顶部摘要条进入固定态，状态面板会立即从“未固定”切到“已固定”。
目标容器
设置 target 后，固钉内容只会在目标容器范围内固定；继续向下滚动，越过容器末尾时会自动退出。
容器开始，继续滚动观察中间这块摘要条。
当内容滚出这个浅色容器的范围后，固钉会自动退出，避免跨区域悬浮。
当内容滚出这个浅色容器的范围后，固钉会自动退出，避免跨区域悬浮。
当内容滚出这个浅色容器的范围后，固钉会自动退出，避免跨区域悬浮。
当内容滚出这个浅色容器的范围后，固钉会自动退出，避免跨区域悬浮。
当内容滚出这个浅色容器的范围后，固钉会自动退出，避免跨区域悬浮。
当内容滚出这个浅色容器的范围后，固钉会自动退出，避免跨区域悬浮。
当内容滚出这个浅色容器的范围后，固钉会自动退出，避免跨区域悬浮。
容器结束，越过这里后不再固定。
底部固钉
position='bottom' 适合承接长列表底部的批量操作条。这个示例也会直接显示当前固定状态和滚动位置，便于判断是否已经生效。
当前状态：未固定change 次数：0scrollTop：0
向下滚动这组待处理工单，底部操作条会一直跟随视口。
待处理工单 1
用于演示长列表场景里的底部操作条，让关键动作不必滚回末尾才能看到。
待处理工单 2
用于演示长列表场景里的底部操作条，让关键动作不必滚回末尾才能看到。
待处理工单 3
用于演示长列表场景里的底部操作条，让关键动作不必滚回末尾才能看到。
待处理工单 4
用于演示长列表场景里的底部操作条，让关键动作不必滚回末尾才能看到。
待处理工单 5
用于演示长列表场景里的底部操作条，让关键动作不必滚回末尾才能看到。
待处理工单 6
用于演示长列表场景里的底部操作条，让关键动作不必滚回末尾才能看到。
待处理工单 7
用于演示长列表场景里的底部操作条，让关键动作不必滚回末尾才能看到。
待处理工单 8
用于演示长列表场景里的底部操作条，让关键动作不必滚回末尾才能看到。
待处理工单 9
用于演示长列表场景里的底部操作条，让关键动作不必滚回末尾才能看到。
传送与手动刷新
teleported 会在固定态时把节点挂到 append-to 指定容器。请滚动后再切换卡片宽度，观察 updateRoot() 对占位尺寸的同步效果。
Teleport 挂载点，滚动后观察卡片依然固定在顶部
已开启 Teleport
固定态节点会被挂到指定容器，内容宽度变化后调用 `updateRoot()` 可同步占位尺寸。
第 1 条说明：适合把局部操作卡片挂到更外层节点，避开复杂层级或裁切上下文。
第 2 条说明：适合把局部操作卡片挂到更外层节点，避开复杂层级或裁切上下文。
第 3 条说明：适合把局部操作卡片挂到更外层节点，避开复杂层级或裁切上下文。
第 4 条说明：适合把局部操作卡片挂到更外层节点，避开复杂层级或裁切上下文。
第 5 条说明：适合把局部操作卡片挂到更外层节点，避开复杂层级或裁切上下文。
第 6 条说明：适合把局部操作卡片挂到更外层节点，避开复杂层级或裁切上下文。
第 7 条说明：适合把局部操作卡片挂到更外层节点，避开复杂层级或裁切上下文。
第 8 条说明：适合把局部操作卡片挂到更外层节点，避开复杂层级或裁切上下文。
何时使用
- 需要让关键操作或摘要信息在滚动过程中持续可见。
- 需要把固定内容限制在某个局部区域内，而不是整页一直显示。
- 需要在内容尺寸变化后手动刷新固定占位，避免布局跳动。
Affix API
Affix Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
offset | 与顶部或底部的偏移距离，单位 px | number | 0 |
position | 固定位置 | AffixPosition | 'top' |
target | 目标容器选择器 | string | '' |
z-index | 固定节点层级 | AffixZIndex | 100 |
teleported | 固定态时是否通过 Teleport 挂载到外部容器 | boolean | false |
append-to | Teleport 的挂载目标 | string | HTMLElement | 'body' |
Affix Events
| 事件 | 说明 | 参数 |
|---|---|---|
change | 固定状态变化时触发 | AffixChangeHandler |
scroll | 监听到滚动后触发 | AffixScrollHandler |
Affix Slots
| 插槽 | 说明 |
|---|---|
default | 固钉内容 |
Affix Exposes
| 暴露项 | 说明 | 类型 |
|---|---|---|
update | 立即重新计算固钉状态 | AffixInstance["update"] |
updateRoot | 重新测量占位尺寸并刷新固钉状态 | AffixInstance["updateRoot"] |
行为约定
target容器首版不支持自身再带滚动条，推荐把它作为普通边界容器使用。teleported=false时，固定节点保留在原位置切换为position: fixed；teleported=true时，仅固定态节点会被传送到append-to。target选择器不存在会直接抛出[XyAffix] ...错误，便于在开发期尽快发现接入问题。