Run countUp.js when user scrolls certain amount of pixels from top of screen

Question

Hi Please can someone help me, basically i want to run the Javascript when #stats become fully visible around center of the page. Once the javascript has run once i dont want it to run again unless they revisit the page.

Any help would be much appreciated thanks in advance.

My Code is below.

<div id="stats">
    <div class="container">
        <div class="row">

            <div class="col-xs-12 col-sm-4">
            <h2><span id="totalFranchises" class="franchise-number">108</span></h2>

            </div>

            <div class="col-xs-12 col-sm-8">

            </div>


        </div>
    </div>
    </div>

<script>
var options = {
useEasing : true,
useGrouping : true,
}
var countUp = new countUp("totalFranchises",108, 256, 0, 3, options);
countUp.start();
</script>

Cheers,

Wes.

so you don't want it to run `countUp.start()` until they scrolled so that `#stats` is visible? I don't see any element with id `stats` — markasoftware, Aug 15 '14 at 21:12
You have to check if the `stats div` is in _viewport_ or not, also add a variable that the first time which the `stats div` has come to _viewport_, the bypass the checking after that. for checking the _viewport_ you can use [this](http://www.appelsiini.net/projects/viewport) — EhsanT, Aug 16 '14 at 02:35
Even I'm trying this go to this link if helpful: http://codepen.io/davidensinger/details/YPNyea — Ganesh Yadav, Oct 22 '15 at 05:11

score 0 · Answer 1 · edited May 23 '17 at 12:15

I did this recently and I used the heights of the divs above the div that contains the countUp. If you want to understand more read here, here and here. This if you don't want to use jQuery.

My solution looks something like this in the controller:

$window.onscroll = function() {
  myFunction()
};

function myFunction() {
  var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop; //this makes it work in all browsers
  var height = document.getElementById("previousDiv").clientHeight; //the height of the previous div for example
  if (bodyScrollTop > height) {
    //start the countUp
  } else {
    //something else
  }
}

Run countUp.js when user scrolls certain amount of pixels from top of screen

1 Answers1