تثبيت 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). عندما يتجاوز المحتوى المثبّت المنطقة المرئية للحاوية قد يقصّه حافّتها، لذا يُستحسن إبقاء ارتفاع المحتوى مختصرًا.