基于滚动更改进度栏值 [英] Change Progress Bar Value based on Scrolling

问题描述

所以想要能够让我的进度条增加，基于我滚动了多远，剩下多少。

So would like to be able to make my progress bar increase, based on how far I've scrolled and how much is left.

我试过这个： jsFiddle ，它似乎不工作，我把我的脚本关闭某人的脚本，使一个块水平移动

I've tried this: jsFiddle and it doesn't seem to work, I based my script off someone's script that made a block move horizontally based on scroll %.

我的代码是：

HTML

HTML

<progress id="progressbar" value="0" max="100"></progress>
<br />
<br />
<br />
Lorem<br />
Ipsum<br />
Dolor<br />
.
.
.
.

JS

$(document).ready(function () {
    $(window).scroll(function () {
        var s = $(this).scrollTop(),
            d = $(document).height(),
            scrollPercent = (s / d);
        var position = (scrollPercent);
        $("#progressbar").progressbar('value', position);
    });
});
});

我不认为我做的正确（我试图模仿另一个人， ）

I don't think I'm doing it right (I was trying to mimic another person and failed)

推荐答案

工作 DEMO

尝试此

Working DEMO

Try this

$(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);

});

希望有帮助，谢谢

这篇关于基于滚动更改进度栏值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！