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 可能被容器邊緣裁切，內容高度應保持精簡。