用户滚动时JQuery百分比增加

Question

我正在寻找能够显示百分比的信息图，我希望它们从0％增加到最终统计数据（即最大值为100％），然后停在那里。您可以在http://www.hispanicsatnbcu.com/part3.html或http://www.smartpowergeneration.com/等网站上看到此效果（请注意第二部分中不同类型能源旁边的百分比）。我想我需要使用JQuery .scrollTop方法，这样当用户达到某一点时，它可以开始增加百分比，因为它们滚动更多但我真的不知道你将如何从这一点动态增加百分比。提前谢谢。

Answer 1

非常简单的示例here

$(window).scroll(function() {
    var startValue = 70; // scrollTop value when to start incrementing
    var stopValue = 300; // scrollTop value when to stop incrementing
    var scrollTop = $(window).scrollTop();
    if (scrollTop > startValue && scrollTop <= stopValue)
        $("#pct").text((((scrollTop-startValue)/(stopValue-startValue))*100).toFixed(0));
    else if (scrollTop <= startValue)
        $("#pct").text(0);
    else if (scrollTop >= stopValue)
        $("#pct").text(100);
});