Barre de progression en haut de page

bonjour à tous!

je souhaite réaliser une bar de progression comme sur ce site : https://greenpeace.fr

Je ne comprends d'ou peux venir le problème dans mon javaScript.

Je vous remercies par avance.

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

#progress{
	background-color:#839c49;

width: 100%;
position: fixed;
left: 0;

z-index: 9999;
height: 3px;
}

$(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);
	});
});

j'ai oublié de préciser que mon menu de navigation est fixe.

Bonjour alex9869,
Pour moi ton script semble fonctionner
Mais il faut raisonner en % en non en px a cause du resize
et j'ai calculé la hauteur d'une facon différente
Un petit exemple :
https://codepen.io/Zonecss/pen/dLembM