Navigation à masquage automatique

La barre de navigation supérieure s’efface pendant que vous lisez : elle glisse vers le haut et se masque lorsque vous faites défiler la page vers le bas, puis réapparaît dès que vous faites défiler vers le haut. Cela permet de récupérer de l’espace vertical — particulièrement précieux sur les petits écrans — sans supprimer l’accès au menu.

Aperçu

• Masquage au défilement vers le bas — la barre de navigation se déplace hors de l’écran dès que vous faites défiler au-delà d’un petit seuil, afin que le contenu long occupe toute la fenêtre d’affichage.
• Affichage au défilement vers le haut — tout défilement vers le haut ramène immédiatement la barre de navigation.
• Transitions CSS fluides — l’affichage/masquage utilise une transformation CSS, et non une modification de la mise en page, ce qui garantit une fluidité et évite de recomposer la page.
• Optimisée pour le mobile — le comportement est particulièrement utile sur les appareils tactiles où l’espace à l’écran est limité.

Fonctionnement

Le comportement repose sur un petit contrôleur sans dépendances dans assets/js/auto-hide-nav.js. Il écoute passivement les événements de défilement, compare la position de défilement actuelle à la précédente et bascule une classe CSS sur la barre de navigation qui pilote la transformation. Comme l’écouteur est passif et que le changement visuel est une transformation, le défilement reste fluide.

Implémentation

Fonctionnalités associées

• Navigation améliorée de la barre latérale
• Navigation au clavier