compteur joue quand la section atteindre le défilement

Question

j'ai le script suivant pour compter quelques statistiques et je veux savoir comment rendre à jouer lorsque le défilement atteint sa section.

Comment nous avons vu à partir du script, le script lorsque la page onload autoplay je pense.

Peut-être que je vais devoir changer le script, mais je ne l'ai pas trouvé un autre script pour cela, si vous connaissez des scripts, s'il vous plaît me dire.

\t (function($) { 
 
\t \t "use strict"; 
 
\t \t function count($this){ 
 
\t \t var current = parseInt($this.html(), 10); 
 
\t \t current = current + 1; /* Where 50 is increment */ \t 
 
\t \t $this.html(++current); 
 
\t \t \t if(current > $this.data('count')){ 
 
\t \t \t \t $this.html($this.data('count')); 
 
\t \t \t } else {  
 
\t \t \t \t setTimeout(function(){count($this)}, 50); 
 
\t \t \t } 
 
\t \t }   \t 
 
\t \t $(".stat-count").each(function() { 
 
\t \t $(this).data('count', parseInt($(this).html(), 10)); 
 
\t \t $(this).html('0'); 
 
\t \t count($(this)); 
 
\t \t }); 
 
    })(jQuery);

.stat { 
 
    margin:150px auto; 
 
    text-align:center; 
 
} 
 
.highlight { 
 
    color:#111; 
 
    padding:20px 0; 
 
    font-weight:bold; 
 
    display:block; 
 
    overflow:hidden; 
 
    margin-bottom:0; 
 
    font-size:48px; 
 
} 
 
.stat i { 
 
\t color:#f7c221; 
 
} 
 
.milestone-details { 
 
    font-weight:bold; 
 
    font-size:18px; 
 
    color:#999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
\t \t <div class="stat"> 
 
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
       <div class="milestone-counter"> 
 
        <i class="fa fa-user fa-3x"></i> 
 
        <span class="stat-count highlight">122</span> 
 
        <div class="milestone-details">Happy Customers</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
       <div class="milestone-counter"> 
 
        <i class="fa fa-coffee fa-3x"></i> 
 
        <span class="stat-count highlight">4226</span> 
 
        <div class="milestone-details">Ordered Coffee's</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
       <div class="milestone-counter"> 
 
        <i class="fa fa-trophy fa-3x"></i> 
 
        <span class="stat-count highlight">14</span> 
 
        <div class="milestone-details">Awards Win</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
       <div class="milestone-counter"> 
 
        <i class="fa fa-camera fa-3x"></i> 
 
        <span class="stat-count highlight">232</span> 
 
        <div class="milestone-details">Photos Taken</div> 
 
       </div> 
 
      </div> 
 
\t \t </div><!-- stat --> 
 
\t </div>

Answer 1

Utilisez le plugin jQuery InView.

$('.milestone-counter').on('inview', function(event, isInView) { 
    if (isInView) { 
    count($(this)); 
    } 
});