JQUERY.COUNTO.JS: On Scroll Count Numbers NOT OnLoad

I'm working with one page website and I want to add a counting numbers with it, so I use javascript.countTo.js. I created every section to group related data and I put the section

Solution 1:

To check if the element is scrolled into view, I'll use function from this answer.

Now, we can check if the element #counters is in view by using below function

function isScrolledIntoView(el) {
    var elemTop = el.getBoundingClientRect().top;
    var elemBottom = el.getBoundingClientRect().bottom;

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    return isVisible;
}

This first gets the bounding points using getBoundingClientRect(). This returns top, left, bottom, right, width and height of the element on which the method is called. These can be used to detect if element is inside view. top and bottom are taken from this object and checked if element bottom is less than window height.

---

First of all, bind scroll event on the window. Inside the handler, check if element is in the view. When element comes in the view, then call the plugin on elements and unbind the scroll event.

function isScrolledIntoView(el) {
  var elemTop = el.getBoundingClientRect().top;
  var elemBottom = el.getBoundingClientRect().bottom;

  var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
  return isVisible;
}

$(window).on('scroll', function() {
  if (isScrolledIntoView(document.getElementById('counters'))) {
    $('.ace-counter-number').countTo();

    // Unbind scroll event
    $(window).off('scroll');
  }
});

.justaddheight {
  height: 500px;
}

.text-center {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>

<section class="justaddheight text-center about">
  <h1>SCROLL DOWN</h1>
  <p>First, Scroll Now</p>
  <p>Second, try Again but wait for few seconds before scroll to identify.</p>
</section>
<section class="justaddheight service">

</section>
<section class="justaddheight portfolio">

</section>
<section id="counters">
  <div class="ace-overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-briefcase to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="89" data-speed="5000" data-refresh-interval="100">89</span>
          <span class="ace-counter-label">Finished projects</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-code to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="2343409" data-speed="5000" data-refresh-interval="50">2343409</span>
          <span class="ace-counter-label">Templates</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-cup to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="1302" data-speed="5000" data-refresh-interval="50">1302</span>
          <span class="ace-counter-label">Cup of coffees</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-people to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="52" data-speed="5000" data-refresh-interval="50">52</span>
          <span class="ace-counter-label">Happy clients</span>
        </div>
      </div>
    </div>
  </div>
</section>

JsFiddle Demo

Solution 2:

You can use appear.js plugin which provides event triggers for elements when they appear, disappear and reappear in the viewport.

<span class='count'>50</span>

And the JS

appear({
  init: function init() {},
  elements: function elements() {
    // Track all elements with the class "count"
    return document.getElementsByClassName('count');
  },
  appear: function appear(el) {
    $(el).countTo({
      from: 0,
      to: $(el).html(),
      speed: 1300,
      refreshInterval: 60
    });
  },
  disappear: function disappear(el) {},
  bounds: 200,
  reappear: true
});