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);
});