title: Start counting after scroll on specific element
body: <p>I create a website and add a counter to my codes.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
      function count($this){
          var current = parseInt($this.html(), 10);
          $this.html(++current);
          if(current !== $this.data('count')){
              setTimeout(function(){count($this)}, 50);
          }
      }        
    $(".c-section4").each(function() {
        $(this).data('count', parseInt($(this).html(), 10));
        $(this).html('0');
        count($(this));
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;div class="section4"&gt;
  &lt;div class="section4-bg"&gt;&lt;/div&gt;
  
  &lt;div class="counter-section"&gt;
  &lt;span class="c-section4"&gt;152 &lt;/span&gt;
  &lt;h3&gt; کارکنان ما &lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;div class="counter-section"&gt;
  &lt;span class="c-section4"&gt;152 &lt;/span&gt;
  &lt;h3&gt; کارکنان ما &lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;div class="counter-section"&gt;
  &lt;span class="c-section4"&gt;152 &lt;/span&gt;
  &lt;h3&gt; کارکنان ما &lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now i have a problem, i want to counter start when i scroll to this element</p>
  
  <p><a href="http://persian-gamers.ir/wood/" rel="noreferrer">Demo</a></p>
  
  <p>Sorry for my bad english</p>