为多个元素实现滚动进度条

Question

我正在尝试实现滚动进度条。 （该栏会告诉用户他阅读了div 中的一篇文章的多少）。

类似在this 网站上实现的东西。

我已经设计了我的自定义条并在fiddle 上对其进行了编码。它工作正常，你可以看到它。

代码如下：

HTML：

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="xyz">
    Hello !!<br />
    XYZ<br />
    Hello !!<br />
    XYZ<br />
    Hello !!<br />
    XYZ<br />
    Hello !!<br />
    XYZ<br />
    Hello !!<br />
    XYZ<br />
    Hello !!<br />
    XYZ<br />
    Hello !!<br />
    XYZ<br />
    Hello !!<br />
    XYZ<br />
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="xyzprog"><div id="prog">Intro</div></div>

JQuery/JS：

$(function(){
    $(window).scroll(function(){
    var elemTop=$("#xyz").offset().top,elemHeight=$("#xyz").height();
        var total=elemTop+elemHeight;
        var scTop=$(window).scrollTop();
            var prog=((scTop-elemTop)/elemHeight)*100;
        var html="Intro;Read=";
            if(prog>100){ prog=100; html="Intro;Read=" }
        if(prog<0){ prog=0; }
            $("#prog").animate({
                "width":""+prog+"%"
            },1).html(html+""+prog+"%");

    });
});

CSS 无关紧要，所以不要发布它。

现在我想要的是：

• 有没有办法让这段代码适用于多个元素（比如最少 10 个）？

• 任何人都可以设计一个像$(elem).scrollProgress() 这样工作的插件吗？我真的很想设计一个，但不知道如何开始:(。

• 有没有更好的办法？

非常感谢任何建议、想法和想法！

提前致谢:)。

Answer 1

已经有一些插件在做你想做的事。查看toc-scrolling-progress。

但如果你想在整个页面上显示它，你可以这样做：

$(window).scroll(function() {

  var documentHeight = $(document).height();
  var windowHeight   = $(window).height();
  var distanceToTop  = $(window).scrollTop();

  var percentScrolled = distanceToTop/(documentHeight - windowHeight) * 100;
  $('#progress-bar').css({'width': percentScrolled + '%'});
});

我用demo创建了一个jsfiddle