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

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

1 个答案: