Créer une « barre de progression » horizontale en haut de page

Temps de lecture : 8 minutes environ.

Je vais vous expliquer ici comment créer une barre de progression horizontale qui évolue en fonction du défilement vertical de la page.



Sur le site Nouvelle-Techno.fr, vous verrez tout en haut de la fenêtre une barre verte qui progressera vers la droite à mesure que vous défilez vers le bas.



Pour commencer…



Un peu de maths…



Nous allons devoir calculer la hauteur de la page, et en fonction de la position du défilement, calculer la largeur de la barre.



Concrètement, nous aurons besoin de 4 valeurs :




  • La hauteur de la page (document)

  • La hauteur de la fenêtre (window)

  • La largeur de la fenêtre (window)

  • La position verticale (scroll)



1ère étape, nous calculons la hauteur de défilement : hauteur de page – hauteur de fenêtre



2ème étape, nous calculons la position actuelle en % de la hauteur totale : position verticale / hauteur de défilement



3ème étape, nous calculons la largeur de la barre : % de la hauteur * largeur de fenêtre



Code HTML



Le code html est très simple, dans mon exemple, une simple balise DIV vide






<div id="progress"></div>





 



Le CSS



Le CSS est tout aussi simple, juste une initialisation de la barre, avec une position fixe, une couleur de fond et une largeur à 0.





#progress{
background-color: #839c49;
height: 3px;
width: 0;
position: fixed;
top: 0;
left: 0;
z-index: 9999; /* Peut être important si vous avez un menu en position fixe */
}


 



Et enfin, le Javascript



Voici le gros morceau (enfin, pour ceux qui n’aiment pas trop les maths).



Le premier code est en javascript "vanilla", le deuxième en jquery.




window.onload = () => {
// Ecouteur d'évènement sur scroll
window.addEventListener("scroll", () => {
// Calcul de la hauteur "utile" du document
let hauteur = document.documentElement.scrollHeight - window.innerHeight

// Récupération de la position verticale
let position = window.scrollY

// Récupération de la largeur de la fenêtre
let largeur = document.documentElement.clientWidth

// Calcul de la largeur de la barre
let barre = position / hauteur * largeur

// Modification du CSS de la barre
document.getElementById("progress").style.width = barre+"px"
})
}





$(function(){
$(document).on('scroll',function(){ // Détection du scroll

// Calcul de la hauteur "utile"
let hauteur = $(document).height()-$(window).height()

// Récupération de la position verticale
let position = $(document).scrollTop()

// Récupération de la largeur de la fenêtre
letlargeur = $(window).width()

// Calcul de la largeur de la barre
let barre = position / hauteur * largeur

// Modification du CSS pour élargir ou réduire la barre
$("#progress").css("width",barre)
});
});







 





Enjoy ? !!!



Obtenir de l'aide



Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat

Créer une « barre de progression » horizontale en haut de page
Article publié le - Modifié le

Catégories : CSS HTML Javascript jQuery

Mots-clés : Tutoriel Javascript jQuery progression barre

Partager : Partager sur Facebook Partager sur Twitter Partager sur LinkedIn