Trigger an event when scroll to specific element and then stop it with jquery

Question

First Step

I want to make a counter that when user load my page the counter starts from 0 and end on its end value (eg 75). So I search from net and found a jQuery code and i copy that code and paste it in my js file custom.js and made some changes as per required. Its working perfectly.

Here is my code:

HTML

<div class="top_div">
  Top Div
</div>
<div class="love_count">75%</div>
<div class="love_count">30%</div>

JS

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));
});
});

Demo

Second Step

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.

1. First When I scroll down to that specific div the counter first show me my end value (eg 75)
2. Second Then its starts from 0 and the counter never stops. Its goes to thousands, millions but never stops.

Here is my code:

HTML

<div class="top_div">
  Top Div
</div>
<div class="love_counter">
  <div class="love_count">75%</div>
  <div class="love_count">30%</div>
</div>

JS

$(window).scroll(function() {
    var hT = $('.love_counter').offset().top,
        hH = $('.love_counter').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (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));
        });
    }
});

Demo

What I want

So I want that When site scrolls down to that specific div, the counter starts from 0 and stop on its end value. But when I scroll up or down the counter should not be start again and still stop there end value.

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.

I am very weak in jQuery so please help me out and guide me. I hope you understand my question.

Answer 1

Here is the completed working code :

<style>
.div{background:#ccc;height:1200px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
<div class="Count">75</div>
<script>
$(window).scroll(startCounter);
function startCounter() {
var hT = $('.Count').offset().top,
      hH = $('.Count').outerHeight(),
      wH = $(window).height();
    if ($(window).scrollTop() > hT+hH-wH) {
        $(window).off("scroll", startCounter);
        $('.Count').each(function () {
            var $this = $(this);
            jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                duration: 2000,
                easing: 'swing',
                step: function () {
                    $this.text(Math.ceil(this.Counter) + '%');
                }
            });
        });
    }
}
</script>

Answer 2

Just add a flag to the div using .data something like .data('counted', true) .

 $(window).scroll(function() { var hT = $('.love_counter').offset().top, hH = $('.love_counter').outerHeight(), wH = $(window).height(), wS = $(this).scrollTop(); if (wS > (hT+hH-wH)){ $(".love_count").each(function() { var elm = $(this); if (!elm.data('counted')) { elm.data('count', parseInt($(this).html(), 10)); elm.html('0'); count(elm); } }); } }); function count($this){ var current = parseInt($this.html(), 10); $this.html(++current + '%'); if(current != $this.data('count')){ setTimeout(function(){count($this)}, 15); } else { $this.data('counted', true); } } 

 .top_div { background-color: red; height: 650px; } .love_count { font-size: 75px; color: #3D7CB1; margin-bottom: 25px; font-weight: 300; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="top_div"> Top Div </div> <div class="love_counter"> <div class="love_count">75%</div> <div class="love_count">30%</div> </div> 

https://jsfiddle.net/5gxw16kd/9/

Answer 3

Maybe it's worth having a look at the following 2 js plugins:

http://scrollmagic.io/

http://prinzhorn.github.io/skrollr/

They both allow you to add interactions as you scroll.