Affix 固钉

滚动吸顶 / 吸底。用 IntersectionObserver 检测占位越界（无 scroll 节流开销，无 IO 环境自动回退 scroll 监听）。

基础用法

吸顶

吸顶工具条

offset-bottom 触发吸底（优先于 offset-top）；target 指定滚动监听容器（默认视口）。

吸底

吸底工具条（offset-bottom）

<script setup lang="ts">
</script>

<template>
  <!-- 吸底 -->
  <LhAffix :offset-bottom="8">
    <div class="demo-affix-bar">吸底工具条</div>
  </LhAffix>
</template>

<script>
export default {}
</script>

<template>
  <!-- 吸底 -->
  <LhAffix :offset-bottom="8">
    <div class="demo-affix-bar">吸底工具条</div>
  </LhAffix>
</template>

<script setup lang="ts">
</script>

<template>
  <!-- 吸顶 -->
  <LhAffix :offset-top="8">
    <div class="demo-affix-bar">吸顶工具条</div>
  </LhAffix>
</template>

<script>
export default {}
</script>

<template>
  <!-- 吸顶 -->
  <LhAffix :offset-top="8">
    <div class="demo-affix-bar">吸顶工具条</div>
  </LhAffix>
</template>

API

LhAffix Props

属性名	说明	类型	默认值
offsetTop	距视口顶部多少像素触发吸顶	number	0
offsetBottom	距视口底部多少像素触发吸底（优先于 offsetTop）	number	0
target	滚动监听容器（选择器或元素，默认视口）	string | HTMLElement	—
sx	sx 快速布局属性	LhSxProps	—

Events

事件名	说明	回调参数
change	固定态切换时触发（进入或离开吸顶 / 吸底）	(fixed: boolean)

无障碍

• 无特殊 role；固定态不影响文档流焦点顺序
• 固定态以占位元素撑高，避免布局跳动

类型定义

本组件对外导出的 TypeScript 类型结构如下（自动提取自 packages/components/affix/src/types.ts 与 @lh-ui/share/core/* 源码，点击各条目展开查看完整定义；属性说明见上方 Props 表）：

LhAffixProps

export interface LhAffixProps {
  /** 距视口顶部多少像素触发吸顶 */
  offsetTop?: number
  /** 距视口底部多少像素触发吸底（优先于 offsetTop） */
  offsetBottom?: number
  /** 滚动监听容器（选择器或元素，默认视口） */
  target?: string | HTMLElement
  /** sx 快速布局属性 */
  sx?: LhSxProps
}