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 (e.g. 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.

First When I scroll down to that specific div the counter first show me my end value (e.g. 75)
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.

deemi-D-nadeem · Accepted Answer · 2016-03-10 12:46:41Z

4

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>

edited Mar 10, 2016 at 12:46

deemi-D-nadeem

2,5544 gold badges40 silver badges73 bronze badges

answered Mar 10, 2016 at 11:49

Ahmed

1,77418 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mosh Feu · Accepted Answer · 2016-03-10 11:53:29Z

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/

edited Mar 10, 2016 at 11:53

answered Mar 10, 2016 at 11:07

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

2 Comments

Mosh Feu Over a year ago

Have you checked the fiddle?

Mosh Feu Over a year ago

I missed the jquery reference in the snippet. How about now?

Vasilis Tsirimokos · Accepted Answer · 2016-03-10 11:07:24Z

0

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.

answered Mar 10, 2016 at 11:07

Vasilis Tsirimokos

2032 silver badges10 bronze badges

2 Comments

deemi-D-nadeem Over a year ago

I think you can't understand my question ... or read it carefully

Vasilis Tsirimokos Over a year ago

I understood your question but instead of trying to fix your code I proposed that since you are weak in jQuery you can easily achieve what you are trying to do using the scrollmagic plugin. I offered this as an alternative. The demos only show some of the things that you can do.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related