Affix 固定

スクロールに追従して上部・下部に固定します。IntersectionObserver でプレースホルダーの境界を検出します（スクロールのスロットリングコストなし。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
  offsetBottom?: number
  target?: string | HTMLElement
  sx?: LhSxProps
}