Affix

Pin content to the top or bottom while scrolling. Uses IntersectionObserver (falls back to scroll listeners).

Basic usage

Pin to top

Pinned toolbar

offset-bottom pins to the bottom (takes priority over offset-top); target selects the scroll container to observe (defaults to the viewport).

Pin to bottom

Pinned toolbar (offset-bottom)

<script setup lang="ts">
</script>

<template>
  <!-- Pin to bottom -->
  <LhAffix :offset-bottom="8">
    <div>Pinned toolbar</div>
  </LhAffix>
</template>

<script>
export default {}
</script>

<template>
  <!-- Pin to bottom -->
  <LhAffix :offset-bottom="8">
    <div>Pinned toolbar</div>
  </LhAffix>
</template>

<script setup lang="ts">
</script>

<template>
  <!-- Pin to top -->
  <LhAffix :offset-top="8">
    <div>Pinned toolbar</div>
  </LhAffix>
</template>

<script>
export default {}
</script>

<template>
  <!-- Pin to top -->
  <LhAffix :offset-top="8">
    <div>Pinned toolbar</div>
  </LhAffix>
</template>

API

LhAffix Props

Attribute	Description	Type	Default
offsetTop	Trigger pinning when the top edge is within this px	number	0
offsetBottom	Trigger bottom pinning (takes precedence)	number	0
target	Scroll container (selector or element)	string | HTMLElement	—
sx	Quick layout props	LhSxProps	—

LhAffix Events

Event	Description	Callback
change	Emitted when the fixed state toggles (pinning on/off)	(fixed: boolean) => void

Accessibility

• No special role; the fixed state preserves the document focus order
• The placeholder keeps the layout height to avoid jumps

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/affix/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhAffixProps

export interface LhAffixProps {
  offsetTop?: number
  offsetBottom?: number
  target?: string | HTMLElement
  sx?: LhSxProps
}