最终更新: http://jsfiddle.net/ddh3t/6/
当向下滚动页面时,进度条被填满。但我想要的是,当它们在屏幕上可见时,它们应该开始填满。如何做到这一点?
小提琴
$(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);
});
假设1:您希望它们在屏幕上始终可见。稍微调整一下CSS就可以了:
progress {
top:10px;
position:fixed;
right:10px;
}
#progressbar2 {
top: 40px;
}
: http://jsfiddle.net/ddh3t/1/
假设2:当进度条可见时,你想要一个动画填充。这需要在JS中进行更改:
(isScrolledIntoView from here)。
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);
}
});
: http://jsfiddle.net/ddh3t/3/
注意,p2(第二个进度条)可以用类似的方式填充。
最终更新: http://jsfiddle.net/ddh3t/6/
试试这个-
$(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);
});
更新小提琴