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

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