Navigation barre de progression

Question

Je suis en train de construire barre de menu de progression (semblable à celui des investisseurs piccsy http://www.piccsy.com/investors/)

Il mesure la hauteur de la page et progresse%.

Des idées sur la façon de le faire?

Merci, Nikola.

Answer 1

Vous trouverez ici une solution à ce problème.

d'abord la div:

<div id="bar"></div>​ 

Maintenant un peu de style:

body{ 
    height:4000px; 
} 

#bar{ 
    position:fixed; 
    background-color:red; 
    width:100%; 
    height:10px; 
}​ 

Et enfin le code jQuery:

var bar = $('#bar'), 
    $window = $(window), 
    docHeight = $(document).height(), 
    baseX = $window.height()/docHeight * 100; 

bar.css('background', '-webkit-linear-gradient(left, red '+ baseX +'%, green '+ baseX +'%)'); 

$window.scroll(function(e) {  
    var x = $window.scrollTop()/docHeight * 100 + baseX; 
    bar.css('background', '-webkit-linear-gradient(left, red '+ x +'%, green '+ x +'%)'); 
}); 

Vous pouvez trouver un exemple de travail dans jsfiddle .

Notez que cela ne fonctionne que dans Google Chrome, car je n'ai utilisé que -webkit-linear-gradient. Si vous voulez vous assurer que cela fonctionne dans tous les navigateurs, vous devez ajouter sa propriété spécifique. Vous pouvez trouver utile Prefixr pour cela.

Answer 2

Vous pouvez utiliser .scroll() pour capturer des événements de défilement à l'aide de jquery. A l'intérieur de cette fonction, vous pouvez obtenir la hauteur de défilement en utilisant la fonction .scrollTop().

var height = $(window).scrollTop() 

Une fois que vous obtenez la hauteur, vous pouvez ensuite définir la barre de progression.

Vous pouvez obtenir la hauteur de page en utilisant cette fonction:

$(document).height(); 

Alors que vous pouvez calculer le pourcentage de définir la position barre de progression.