Affix 固定

スクロールが閾値に達した際に要素をビューポートの上部または下部に固定します。上部に固定するツールバーなどでよく使われます。

固定

<template>
  <div class="demo-col" style="max-width: 640px">
    <p class="demo-note">下のコンテナ内をスクロールすると、上部固定バーは上端から 12px の位置で固定されます</p>
    <div ref="scroller" class="anchor-scroller">
      <div v-for="i in 12" :key="i" class="anchor-sec">
        <h3>第 {{ i }} 段</h3>
        <p>上下にスクロールして固定バーの挙動を確認してください。</p>
      </div>
    </div>
    <LhAffix :target="scrollerEl" :offset-top="12">
      <div class="affix-bar">上部固定バー（offsetTop=12）</div>
    </LhAffix>
    <p class="demo-note">Affix はスクロールコンテナの外側かつコンテナの後に配置します。スクロール時に自動的に fixed になります。</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    scrollerEl: undefined,
  }),
}
</script>

Props

プロパティ	説明	型	デフォルト値
offsetTop	ビューポート上端から何ピクセルで上部固定をトリガーするか	number	—
offsetBottom	ビューポート下端から何ピクセルで下部固定をトリガーするか（offsetTop より優先）	number	—
target	スクロールを監視するコンテナ（セレクタまたは要素、デフォルトはビューポート）	string \| HTMLElement	—
sx	sx によるレイアウト省略記法	—	—

ヒント

target はスクロール可能なコンテナ（overflow: auto）である必要があります。上部固定の内容がコンテナの可視領域を超える場合、Affix がコンテナの端で切り取られることがあるため、内容の高さはコンパクトに保ってください。