Закрепление

Закрепление контента вверху или внизу при прокрутке. Использует IntersectionObserver для отслеживания выхода placeholder за границы (без троттлинга прокрутки; при отсутствии IO автоматически откатывается к прослушиванию scroll).

Базовое использование

Закрепление вверху

Закреплённая панель

offset-bottom закрепляет элемент внизу (приоритет выше, чем у offset-top); target задаёт контейнер прокрутки для отслеживания (по умолчанию viewport).

Закрепление внизу

Закреплённая панель (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	На сколько пикселей от верха viewport срабатывает закрепление вверху	number	0
offsetBottom	На сколько пикселей от низа viewport срабатывает закрепление внизу (приоритет выше, чем у offsetTop)	number	0
target	Контейнер прокрутки (селектор или элемент; по умолчанию viewport)	string | HTMLElement	—
sx	Сокращённые свойства компоновки sx	LhSxProps	—

Events

Событие	Описание	Параметр обратного вызова
change	Срабатывает при переключении закреплённого состояния (закрепление или освобождение)	(fixed: boolean)

Доступность

• Без специальной role; закреплённое состояние не влияет на порядок фокуса в потоке документа
• При закреплении высота сохраняется за счёт элемента-placeholder, чтобы избежать скачков макета

Типы

TypeScript-типы, экспортируемые этим компонентом (извлечены автоматически из packages/components/affix/src/types.ts и исходников @lh-ui/share/core/*; раскройте нужный пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhAffixProps

export interface LhAffixProps {
  /** На сколько пикселей от верха viewport срабатывает закрепление вверху */
  offsetTop?: number
  /** На сколько пикселей от низа viewport срабатывает закрепление внизу (приоритет выше, чем у offsetTop) */
  offsetBottom?: number
  /** Контейнер прокрутки (селектор или элемент; по умолчанию viewport) */
  target?: string | HTMLElement
  /** Сокращённые свойства компоновки sx */
  sx?: LhSxProps
}