Anclaje

Fija un elemento en la parte superior o inferior del viewport cuando el desplazamiento alcanza un umbral. Se usa habitualmente en barras de herramientas con fijación superior.

Anclaje

<template>
  <div class="demo-col" style="max-width: 640px">
    <p class="demo-note">Desplázate por el contenedor de abajo: la barra se fija cuando queda a 12 px del borde superior</p>
    <div ref="scroller" class="anchor-scroller">
      <div v-for="i in 12" :key="i" class="anchor-sec">
        <h3>Sección {{ i }}</h3>
        <p>Sube y baja para observar la barra fijada.</p>
      </div>
    </div>
    <LhAffix :target="scrollerEl" :offset-top="12">
      <div class="affix-bar">Barra fijada (offsetTop=12)</div>
    </LhAffix>
    <p class="demo-note">Affix debe colocarse fuera y después del contenedor de desplazamiento; al desplazarse se vuelve fixed automáticamente.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    scrollerEl: undefined,
  }),
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
offsetTop	Píxeles respecto al borde superior del viewport que activan la fijación superior	number	—
offsetBottom	Píxeles respecto al borde inferior del viewport que activan la fijación inferior (prevalece sobre offsetTop)	number	—
target	Contenedor cuyo desplazamiento se escucha (selector o elemento; el viewport por defecto)	string \| HTMLElement	—
sx	Propiedades de layout abreviadas	—	—

Consejo

target debe ser un contenedor desplazable (overflow: auto). Si el contenido fijado supera el área visible del contenedor, Affix puede quedar recortado por sus bordes; conviene mantener una altura de contenido reducida.