jquery - 仅在页面向下滚动时增加进度条

Question

我正在尝试实现一个进度条，当用户在页面上向下滚动时该进度条会递增。目前，进度条正在跟踪用户上下滚动的时间。当用户向上滚动时，进度条会递减。有什么方法可以让它仅在页面向下滚动时跟踪进度？

JS

(function(){
    var $w = $(window);
    var $circ = $('.animated-circle');
    var $progCount = $('.progress-count');

    var wh, h, sHeight;

    function setSizes(){
        wh = $w.height();
        h = $('body').height();
        sHeight = h - wh;
    }

    setSizes();

    $w.on('scroll', function(){
        var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
        updateProgress(perc);
    }).on('resize', function(){
        setSizes();
        $w.trigger('scroll');
    });


    function updateProgress(perc){
        var circle_offset = 126 * perc;
        $circ.css({
            "stroke-dashoffset" : 126 - circle_offset
        });
        $progCount.html(Math.round(perc * 100) + "%");

    }

}());

这是一个fiddle 。感谢您的任何见解。

Answer 1

我更新了你的 fiddle 并使用一个变量来跟踪用户滚动的距离!试一试! https://jsfiddle.net/b8y5wb8q/2/

var reachedPercent = 0; // initial value
...
if(perc > reachedPercent) {
    reachedPercent = perc;
    updateProgress(perc);
}