0

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.

Tony Barsotti
  • 1,691
  • 2
  • 13
  • 17
  • That's the thing I'm so new to Javascript and JQuery that I really don't know where to start. I was able to find one related question on here but it was closed and the only answer given was pretty general. Here's the link http://stackoverflow.com/questions/11737244/how-to-add-a-counter-updating-when-you-scroll-down-a-page – Tony Barsotti Feb 08 '13 at 17:14

1 Answers1

3

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);
});
kei
  • 20,157
  • 2
  • 35
  • 62