Start Counting After Scroll on Specific Element

Sometimes it’s important to do some activities when a specific element is visible on the web page. So something needs to be trigger when that element is showing on the web page. Suppose you want to start counting after scroll on that specific element. Here is the code for that.

HTML CODE:
<div class="container">
  <h2 class="well well-lg" style="margin-top: 200px;">Scroll Down</h2>
  <h2 class="well well-lg" style="margin-top: 200px;">Scroll Down</h2>
  <div class="jumbotron text-center" style="margin-top: 200px;">
    <div class="container">
      <div class="col-lg-3">
        <h2>Total Sales</h2>
        <h1 class="counter">967</h1>
      </div>
      <div class="col-lg-3">
        <h2>Total Sales</h2>
        <h1 class="counter">967</h1>
      </div>
      <div class="col-lg-3">
        <h2>Total Sales</h2>
        <h1 class="counter">967</h1>
      </div>
      <div class="col-lg-3">
        <h2>Total Sales</h2>
        <h1 class="counter">967</h1>
      </div>
    </div>
  </div>
</div>
JAVASCRIPT CODE:
function isCounterElementVisible($element) {
  var topView = $(window).scrollTop();
  var botView = topView + $(window).height();
  var topElement = $element.offset().top;
  var botElement = topElement + $element.height();
  return ((botElement <= botView) && (topElement >= topView));
}

$(window).scroll(function() {
  $(".counter").each(function() {
    isOnView = isCounterElementVisible($(this));
    if (isOnView && !$(this).hasClass('visibled')) {
      $(this).addClass('visibled');
      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 3000,
        easing: 'swing',
        step: function(now) {
          $(this).text(Math.ceil(now));
        }
      });
    }
  });
});

See Demo:

What is JavaScript

JavaScript is the scripting programming language. The official name of JavaScript is ECMAScript. The ECMA organization is developed the JavaScript. JavaScript provide us to add instructive  features in our web page. Let’s write some JavaScript code.

<html>
    <head>
        <title>My First Java Script Code</title>
    </head>
    <body>
        <script type="text/javascript">
           document.write('This is my First Java Script Code');  // This is my first Java Script Code
        </script>
    </body>
</html>