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

Par Nouvelle-Techno.fr le 18 octobre 2017 - Catégories : CSS HTML Javascript jQuery

Lire l'article sur le site d'origine

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

#Tutoriel #Javascript #jQuery #progression #barre