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

18 octobre 2017 - : CSS HTML Javascript jQuery - : Pas de commentaire

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

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)

$(function(){
	$(document).on('scroll',function(){ // Détection du scroll
		
		// Calcul de la hauteur "utile"
		var hauteur = $(document).height()-$(window).height();
		
		// Récupération de la position verticale
		var position = $(document).scrollTop();

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

		// Calcul de la largeur de la barre		
		var barre = position / hauteur * largeur;
		
		// Modification du CSS pour élargir ou réduire la barre		
		$("#progress").css("width",barre);
	});
});

Enjoy ? !!!

Commentaires

Ecrire un commentaire

Pas encore de commentaire

Laisser un commentaire