Закрепление

Фиксирует элемент у верхнего или нижнего края окна просмотра при достижении порога прокрутки. Часто используется для закрепляющихся панелей инструментов.

Закрепление

<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 может обрезаться его краем — высоту содержимого следует держать компактной.