Anclaje

Fijación arriba o abajo al desplazar. Emplea IntersectionObserver para detectar cuándo el marcador de posición sale del contenedor (sin coste de limitación del desplazamiento); si el entorno no dispone de IntersectionObserver, retrocede automáticamente a la escucha de scroll.

Uso básico

Fijar arriba

Barra fijada arriba

offset-bottom activa la fijación abajo (tiene prioridad sobre offset-top); target especifica el contenedor de desplazamiento que se escucha (por defecto, el viewport).

Fijar abajo

Barra fijada abajo (offset-bottom)

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

<template>
  <!-- Fijar abajo -->
  <LhAffix :offset-bottom="8">
    <div class="demo-affix-bar">Barra fijada abajo</div>
  </LhAffix>
</template>

<script>
export default {}
</script>

<template>
  <!-- Fijar abajo -->
  <LhAffix :offset-bottom="8">
    <div class="demo-affix-bar">Barra fijada abajo</div>
  </LhAffix>
</template>

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

<template>
  <!-- Fijar arriba -->
  <LhAffix :offset-top="8">
    <div class="demo-affix-bar">Barra fijada arriba</div>
  </LhAffix>
</template>

<script>
export default {}
</script>

<template>
  <!-- Fijar arriba -->
  <LhAffix :offset-top="8">
    <div class="demo-affix-bar">Barra fijada arriba</div>
  </LhAffix>
</template>

API

LhAffix Props

Prop	Descripción	Tipo	Predeterminado
offsetTop	Píxeles desde el borde superior del viewport que activan la fijación arriba	number	0
offsetBottom	Píxeles desde el borde inferior del viewport que activan la fijación abajo (prioridad sobre offsetTop)	number	0
target	Contenedor de desplazamiento escuchado (selector o elemento; por defecto, el viewport)	string | HTMLElement	—
sx	Props de disposición rápida	LhSxProps	—

Events

Evento	Descripción	Parámetros de retrollamada
change	Se dispara al cambiar el estado de fijación (al entrar o salir de la fijación arriba/abajo)	(fixed: boolean)

Accesibilidad

• Sin role especial; el estado fijo no altera el orden de foco del flujo del documento
• El estado fijo mantiene la altura mediante un marcador de posición, para evitar saltos de diseño

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/affix/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhAffixProps

export interface LhAffixProps {
  /** Píxeles desde el borde superior del viewport que activan la fijación arriba */
  offsetTop?: number
  /** Píxeles desde el borde inferior del viewport que activan la fijación abajo (prioridad sobre offsetTop) */
  offsetBottom?: number
  /** Contenedor de desplazamiento escuchado (selector o elemento; por defecto, el viewport) */
  target?: string | HTMLElement
  /** Props de disposición rápida */
  sx?: LhSxProps
}