9

スクロールした距離と残りの量に基づいて、進行状況バーを増やしたいと思います。

私はこれを試しました:

私のコード:

<progress id="progressbar" value="0" max="100"></progress>
<br />
<br />
<br />
Lorem<br />
Ipsum<br />
Dolor<br />
.
.
.
.

JS:

$(document).ready(function () {
    $(window).scroll(function () {
        var s = $(this).scrollTop(),
            d = $(document).height(),
            scrollPercent = (s / d);
        var position = (scrollPercent);
        $("#progressbar").progressbar('value', position);
    });
});
4

5 に答える 5

20

ワーキングデモ

これを試して

$(window).scroll(function () {
  var s = $(window).scrollTop(),
        d = $(document).height(),
        c = $(window).height();
        scrollPercent = (s / (d-c)) * 100;
        var position = scrollPercent;

   $("#progressbar").attr('value', position);

});

これが役に立てば幸いです、ありがとう

于 2013-10-31T07:01:32.673 に答える
6

ロジックはこんな感じ

totalValue  = (documentHeight - windowHeight);
currntValue = scrolledValue;
percentage =  (currntValue/ totalValue  ) * 100

http://jsfiddle.net/PvVdq/71/

   $(document).ready(function () {
    $(window).scroll(function () {
        var s = $(this).scrollTop(),
            d = $(document).height()-$(window).height(),
            scrollPercent = (s / d)*100;       
        $("#progressbar").attr('value', scrollPercent);
     });
 });
于 2013-10-31T06:53:34.900 に答える