Barre de progression

Un classique facile d’exécution, ajouter une barre de progression lorsqu’on scrolle le long d’un site ou d’un article de blog, fait toujours son petit effet, et au niveau de l’expérience utilisateur apporte une indication au lecteur de la longueur d’un questionnaire, d’un article, d’une mention légale.

Construire une barre de progression au défilement

Pour réaliser cette indication de progression, il faut définir graphiquement ou le positionner.
Habituellement accompagné d’un menu fixé en haut de la page, mais cela reste une utilisation classique, il est toute a fait possible de mettre en bas de page ou sur coté.

Pour l’exemple, nous allons utiliser une barre de progression fixer sur le menu du haut de la page.
Pour la construction de notre menu nous allons utiliser une div qui contient tout le menu et la barre de progression que nous allons fixer en haut de la page.

<div class="menu_top">
    <nav>
       <a href="#">Home</a>
       <a href="#">About</a>
       <a href="#">Contact</a>
    </nav>
    <div class="progress_container">
        <div class="curseur"></div>
    </div>
</div>
                 

Donc nous ajoutons une div « progress_container » et à l’intérieur de cette div une div vide que nous appellerons « curseur » il faut maintenant styliser un minimum.
Nous allons donc fixer une hauteur au « progress_container » qui sera la même que le curseur disons 4 px. Ainsi qu’une couleur pour la barre de progression.

.menu_top{
 postion: fixed;
 width: 100%;
}
.progress_container{
  width : 100%;
  height:4px;
  background: #efefef;
}
.curseur{
  height: 4px;
  width: 10%;
  background:#b10f11;
  transition: 0.4s ease-in
}

Le JavaScript qui fait progresser

Maintenant que la barre de progression à votre style graphique, il nous faut la faire progresser quand le lecteur utilise le défilement de la page.
Pour ce faire, il nous faut calculer simplement le pourcentage de la page sur laquelle on se trouve on va donc utiliser 2 méthodes :

• Une pour savoir à l’avance quel est la hauteur de la page.
• Une autre pour connaitre sa position

L’un moins l’autre le tout diviser par cent nous donnera le pourcentage, que nous utiliserons comme largeur (« width ») du curseur.

Pour le mettre a jours a chaque mouvement du lecteur sur la page ce calcul doit se trouver dans un « addEventListener » comme nous avions utilisé pour le tuto du mode sombre.

document.addEventListener('scroll', function(){
  let beginScroll = document.documentElement.scrollTop;
  let pageHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  let scrollResult = (beginScroll / pageHeight) * 100;
  document.querySelector('.curseur').style.width = scrollResult + "%"
})