title: jquery - Make number count up when in viewport
body: <p>I'm trying to make a number count up when it's within the viewport, but currently, the script i'm using will interrupt the count on scroll.</p>
  
  <p>How would I make it so that it will ignore the scroll and just count up when it's within the viewport? This needs to work on mobile, so even when a user is scrolling on touch. It cannot interrupt the count.</p>
  
  <p>Please see here:
  <a href="http://jsfiddle.net/Q37Q6/27/" rel="nofollow">http://jsfiddle.net/Q37Q6/27/</a></p>
  
  <pre><code>(function ($) {
  
  $.fn.visible = function (partial, hidden) {
  
      var $t = $(this).eq(0),
          t = $t.get(0),
          $w = $(window),
          viewTop = $w.scrollTop(),
          viewBottom = viewTop + $w.height(),
          _top = $t.offset().top,
          _bottom = _top + $t.height(),
          compareTop = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom,
          clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
  
      return !!clientSize &amp;&amp; ((compareBottom &lt;= viewBottom) &amp;&amp; (compareTop &gt;= viewTop));
  };
  
  })(jQuery);
  
  
  // Scrolling Functions
  $(window).scroll(function (event) {
  function padNum(num) {
      if (num &lt; 10) {
          return "" + num;
      }
      return num;
  }
  
  var first = 25; // Count up to 25x for first
  var second = 4; // Count up to 4x for second
  function countStuffUp(points, selector, duration) { //Animate count
      $({
          countNumber: $(selector).text()
      }).animate({
          countNumber: points
      }, {
          duration: duration,
          easing: 'linear',
          step: function () {
              $(selector).text(padNum(parseInt(this.countNumber)));
          },
          complete: function () {
              $(selector).text(points);
          }
      });
  }
  
  // Output to div
  $(".first-count").each(function (i, el) {
      var el = $(el);
      if (el.visible(true)) {
          countStuffUp(first, '.first-count', 1600);
      }
  });
  
  // Output to div
  $(".second-count").each(function (i, el) {
      var el = $(el);
      if (el.visible(true)) {
          countStuffUp(second, '.second-count', 1000);
      }
  });
  
  });
  </code></pre>