Bonjour à tous voilà mon problème ,

je voudrais faire une progress bar dynamique pour ma page web (faite à l'aide de boostrap ) qui s’incrémente en fonction de "l'avancement" dans mon site (o% si on est au début, 25% si on est au 1/4 ... juqu'a 100%).

Le problème c'est que je ne connais pas grand chose en javascript :-/

merci d'avance pour votre aide .

Bonjour,

Pour cela il faut déclencher un événement au scroll :

document.body.addEventListener('scroll', scroll);

Ensuite, à l'événement on calcul à quel niveau on est

function scroll()
{
 let scroll = document.body.scrollTop;
 let total = document.body.offsetWidth;
 let pourcentage = scroll/total;
}

Ensuite tu as plus qu'à changer je css de ta progressbar avec la valeur !

Bonjour,

en sus de la proposition de Alex06450, je suggère une amélioration : https://johnresig.com/blog/learning-from-twitter/

L'ensemble peut aussi se faire sans JS : http://youmightnotneedjs.com/#scroll_indicator

 

-
Edité par Kistrick 22 juillet 2018 à 15:09:51