Bonjour à tous,

Je rencontre actuellement un problème avec jQuery. J'eesaie de mettre en place sur mon site (pour l'instant en local encore) un indicateur de lecture, c'est-à-dire une barre horizontale positionnée en haut de la page qui montre au-fur-et-à-mesure que l'on descend où l'on en est dans la lecture de l'article.

Le problème, c'est que normalement, la barre devrait atteindre 100 % quand on est tout en bas de la page, sauf que là, aux 3/4 de la page, la barre atteint déjà les 100%, et quand on arrive au bas de la page, on est à 150 %.

Comment serait-il possible de corriger cela ? Je pense que c'est une histoire de calcul en jQuery. J'ai déjà essayé de corriger le problème en agissant sur la propriété max-width de CSS en la mettant à 100 %, mais rien n'y fait.

Voici mon code jQuery :

$(window).scroll(function() {

    var h = $(document).height();

    var s = $(window).scrollTop();

    var w = $(window).height();

    var t = (s / h) * w;

    var p = Math.ceil((s + t) / h * 110) + 1;

    $('#barre').width(p + '%');
    if (s > 150){
      $('#barre').height(10);
      $('#progression').css('height', '10px');
    }else{
      $('#barre').height(10);  
      $('#progression').css('height', '10px');      
    }
});

Mon code CSS :

#progression {
    position:fixed;
    top: 0;
	left: 0;
    width: 100%;
	max-width:100%;
    background: #cfcfcf;
    z-index: 200;
    transition: all 0.3s ease;    
}
 
#barre {
    position: absolute;
    top: 0;
	left: 0;
    background-color: #282828;
    width: 0%;
	max-width:100%;
    height: 100%;
	overflow:scroll-y;
    transition: all 0.3s ease-in-out;
}

Mon code HTML :

<div id="progression"><div id="barre"></div></div>

Par avance, je vous remercie de votre aide ! Je pense que ce n'est pas très compliqué à résoudre, mais mes connaissances en jQuery sont hélas trop modestes pour y parvenir.

Bonjour,

Tu peux nous faire un jsfiddle pour qu'on puisse tester stp

Voilà mon JSFiddle : https://jsfiddle.net/steffi13/nokc1mrt/ 

Mais le problème n'apparaît pas sur le JSFiddle, il n'apparaît que sur mon code en local, et je ne sais pas pourquoi

As-tu essayé cette solution: https://www.w3schools.com/howto/howto_js_scroll_indicator.asp ?

Oui, et ça ne marche pas. J'ai essayé sans la partie header car je n'en ai pas besoin. Quand je copie-colle tout et que je le met dans mon code JS, ça ne marche pas, et quand je le met entre balises script directement dans ma page, ça ne marche pas non plus...