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
}