<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <p class="text-center">Scroll Down</p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <div class="grey-bg c-no container-fluid"> <div class="container"> <div class="row" id="counter"> <div class="col-sm-4 counter-Txt"> Customers <span class="counter-value" data-count="10">0</span> Million</div> <div class="col-sm-4 counter-Txt"> Product <span class="counter-value" data-count="25">0</span> Thousand</div> <div class="col-sm-4 counter-Txt margin-bot-35"> Team <span class="counter-value" data-count="150">0</span> Peoples</div> </div> </div> </div> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p> <p>  </p>

.c-no{height:150px;} .grey-bg{background:#ebebeb;} .counter-Txt{text-align:center; font-size:20px; font-weight:bold; text-transform:uppercase; margin-top:20px;} .counter-Txt span{display:block; font-size:36px} @media(min-width:320px) and (max-width:767px){ .c-no{height:100%;} .counter-Txt{margin-top:35px;} .margin-bot-35{margin-bottom:35px;} }

var a = 0; $(window).scroll(function() { var oTop = $('#counter').offset().top - window.innerHeight; if (a == 0 && $(window).scrollTop() > oTop) { $('.counter-value').each(function() { var $this = $(this), countTo = $this.attr('data-count'); $({ countNum: $this.text() }).animate({ countNum: countTo }, { duration: 7000, easing: 'swing', step: function() { $this.text(Math.floor(this.countNum)); }, complete: function() { $this.text(this.countNum); //alert('finished'); } }); }); a = 1; } });