Ancrage

Fixe un élément en haut ou en bas du viewport lorsque le défilement atteint un seuil. Souvent utilisé pour les barres d'outils collantes.

Ancrage

<template>
  <div class="demo-col" style="max-width: 640px">
    <p class="demo-note">Faites défiler le conteneur ci-dessous : la barre se fixe à 12 px du haut</p>
    <div ref="scroller" class="anchor-scroller">
      <div v-for="i in 12" :key="i" class="anchor-sec">
        <h3>Section {{ i }}</h3>
        <p>Défilez vers le haut et le bas pour observer la barre collante.</p>
      </div>
    </div>
    <LhAffix :target="scrollerEl" :offset-top="12">
      <div class="affix-bar">Barre collante (offsetTop=12)</div>
    </LhAffix>
    <p class="demo-note">Affix doit être placé en dehors du conteneur défilant, après celui-ci ; il passe automatiquement en fixed au défilement.</p>
  </div>
</template>

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

Props

Prop	Description	Type	Valeur par défaut
offsetTop	Nombre de pixels depuis le haut du viewport déclenchant l'ancrage en haut	number	—
offsetBottom	Nombre de pixels depuis le bas du viewport déclenchant l'ancrage en bas (prioritaire sur offsetTop)	number	—
target	Conteneur de défilement écouté (sélecteur ou élément, viewport par défaut)	string \| HTMLElement	—
sx	Raccourci de mise en page sx	—	—

Astuce

target doit être un conteneur défilable (overflow: auto). Lorsque le contenu ancré dépasse la zone visible du conteneur, il peut être rogné par les bords de celui-ci ; conservez une hauteur de contenu compacte.