Auto Hiding

Le projet fournit une directive Alpine x-autohiding basée sur la librairie Headroom.js, permettant de masquer ou afficher automatiquement un élément (souvent un header) en fonction du scroll.

Utilisation simple

<header x-autohiding>
  Header auto-masqué
</header>

➡️ Le header disparaît au scroll vers le bas ➡️ Il réapparaît au scroll vers le haut

Utilisation avec options personnalisées

La directive accepte un objet de configuration Headroom.js :

<header
  x-autohiding="{
    tolerance: { up: 5, down: 20 },
    classes: {
      unpinned: 'is-hidden'
    }
  }"
>
  Header personnalisé
</header>

Les options passées surchargent les valeurs par défaut.

Documentation

https://wicky.nillia.ms/headroom.js/