title: Trigger an event when scroll to specific element and then stop it with jquery
body: <blockquote>
    <p><strong>First Step</strong></p>
  </blockquote>
  
  <p>I want to make a counter that when user load my page the counter starts from 0 and end on its end value (e.g. 75). So I search from net and found a <code>jQuery</code> code and i copy that code and paste it in my js file <code>custom.js</code> and made some changes as per required. Its working perfectly.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="top_div"&gt;
    Top Div
  &lt;/div&gt;
  &lt;div class="love_count"&gt;75%&lt;/div&gt;
  &lt;div class="love_count"&gt;30%&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>jQuery(document).ready(function ($) {
  function count($this){
    var current = parseInt($this.html(), 10);
    $this.html(++current + '%');
    if(current !== $this.data('count')){
      setTimeout(function(){count($this)}, 15);
    }
  }
  
  $(".love_count").each(function() {
    $(this).data('count', parseInt($(this).html(), 10));
    $(this).html('0');
    count($(this));
  });
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/deemi/qox6u9sn/" rel="nofollow"><strong>Demo</strong></a></p>
  
  <blockquote>
    <p><strong>Second Step</strong></p>
  </blockquote>
  
  <p>Now my clients want that when user scroll down to this specific div then the counter starts. So I again Search from net and found some other codes. But its not working.</p>
  
  <ol>
  <li><strong>First</strong> When I scroll down to that specific div the counter first show me my end value (e.g. 75)</li>
  <li><strong>Second</strong> Then its starts from 0 and the counter never stops. Its goes to thousands, millions but never stops.</li>
  </ol>
  
  <p>Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="top_div"&gt;
    Top Div
  &lt;/div&gt;
  &lt;div class="love_counter"&gt;
    &lt;div class="love_count"&gt;75%&lt;/div&gt;
    &lt;div class="love_count"&gt;30%&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(window).scroll(function() {
      var hT = $('.love_counter').offset().top,
          hH = $('.love_counter').outerHeight(),
          wH = $(window).height(),
          wS = $(this).scrollTop();
      if (wS &gt; (hT+hH-wH)){
          function count($this){
              var current = parseInt($this.html(), 10);
              $this.html(++current + '%');
              if(current !== $this.data('count')){
                  setTimeout(function(){count($this)}, 15);
              }
          }
  
          $(".love_count").each(function() {
              $(this).data('count', parseInt($(this).html(), 10));
              $(this).html('0');
              count($(this));
          });
      }
  });
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/deemi/5gxw16kd/" rel="nofollow">Demo</a></strong></p>
  
  <blockquote>
    <p><strong>What I want</strong></p>
  </blockquote>
  
  <p>So I want that When site scrolls down to that specific div, the counter starts from 0 and stop on its end value. <strong>But</strong> when I scroll up or down the counter should not be start again and still stop there end value.</p>
  
  <p>But when user refresh the page and scroll down to that specific div the counter starts as usual and stop to there end value and not starts again when I scroll up or down.</p>
  
  <p>I am very weak in jQuery so please help me out and guide me. I hope you understand my question.</p>