Question

向下滚动页面时，会填充进度条。但我希望他们应该在屏幕上可见时开始填充。如何实现？

$(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);
    $("#progressbar2").attr('value', position);

});

Answer 1

假设1：您希望它们始终在屏幕上可见。一些CSS调整会做：

progress {
    top:10px;
    position:fixed;
    right:10px;
}
#progressbar2 {
    top: 40px;
}

DEMO ：http://jsfiddle.net/ddh3t/1/

假设2：当进度条可见时，您需要动画填充。这需要改变JS：

（来自here的isScrolledIntoView）。

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

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

    var p1 = $("#progressbar"), p2 = $("#progressbar2");

    if(isScrolledIntoView(p1)) {
        var val = 0, delay = 32, timer;        
        timer = setInterval(function() {
            p1.attr('value', val++);
            if(val>=position) clearInterval(timer);
        },delay);

    }
});

DEMO ：http://jsfiddle.net/ddh3t/3/

请注意，p2（第二个进度条）可以类似地填充。

<小时/> 最终更新：http://jsfiddle.net/ddh3t/6/

Answer 2

试试这个 -

 $(window).scroll(function () {
var c = $(window).height();
  var progressLowerLimit=1000-c; //assuming the first progressbar to 1000px away from top.
if(progressLowerLimit<0)
    progressLowerLimit=0;
var s = $(window).scrollTop(),
d = $(document).height()-progressLowerLimit;

if(s<progressLowerLimit)
  return;
else
 s=s-progressLowerLimit;
scrollPercent = (s / (d-c)) * 100;
var position = scrollPercent;

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

updated fiddle

当屏幕上可见时，进度条应开始填满

2 个答案: