JQuery Percentage Increases as User Scrolls

Question

I'm looking to create an infographic that will display percentages and I want them to increase from 0% to the final statistic (i.e. max of 100%) and then stop there. You can see this effect on sites like http://www.hispanicsatnbcu.com/part3.html or http://www.smartpowergeneration.com/ (notice the percentages next to the different types of energy in the second section). I imagine that I would need to use the JQuery .scrollTop method so that when a user reaches a certain point it can begin to increase the percentage as they scroll more but I really don't know how you would dynamically increase the percentage from that point. Thanks in advance.

Answer 1

Really simple example 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);
});