title: Trigger jQuery animated number counter on window scroll
body: <p>I'm trying to get this jQuery animated counter to trigger as soon as the user scrolls more than 200 pixels down the page:</p>
  
  <p>Original jQuery code from <a href="https://stackoverflow.com/questions/23006516/jquery-animated-number-counter-from-zero-to-value">here</a></p>
  
  <pre><code>$('.Count').each(function () {
      var $this = $(this);
      jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
          duration: 1000,
          easing: 'swing',
          step: function () {
              $this.text(Math.ceil(this.Counter));
          }
      });
  });
  </code></pre>
  
  <p>I've tried to wrap it in the following jQuery but it doesn't trigger the animation until the end:</p>
  
  <pre><code>$(window).scroll(function() {
      if ($(window).scrollTop() &gt; 200) {
          $('.Count').each(function () {
              var $this = $(this);
              jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                  duration: 1000,
                  easing: 'swing',
                  step: function () {
                      $this.text(Math.ceil(this.Counter));
                  }
              });
          });
      }
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span class="Count"&gt;100&lt;/span&gt;
  &lt;br/&gt;
  &lt;span class="Count"&gt;200&lt;/span&gt;
  &lt;br/&gt;
  &lt;span class="Count"&gt;300&lt;/span&gt;
  </code></pre>
  
  <p>The fiddle from the other post is <a href="http://jsfiddle.net/Yy6r6/3/" rel="nofollow noreferrer">here</a></p>
  
  <p>What would be the best way to trigger the jQuery counter as soon as the user scrolls into view or 200 pixels down the page? I've also tried the jQuery Wayfinder but not had any luck with making it work.</p>