run jQuery Nummer Zähler auf Bildlauf

Question

Ich habe eine jQuery-Nummer Zähler, der gut funktioniert, aber es läuft, sobald die Seite geladen wird. Was ich zu tun versuche, ist herauszufinden, wie man es zum Laufen bringt, wenn das Element in Sicht kommt? Dies ist meine aktuelle Markup

EDIT

Haben Sie den gewünschten Effekt mit Wegpunkten. Aktualisiert jQuery unter

$('#counter').waypoint(function (direction) { 
 
    $('.count').each(function() { 
 
     var $this = $(this); 
 
     jQuery({ 
 
     Counter: 0 
 
     }).animate({ 
 
     Counter: $this.text() 
 
     }, { 
 
     duration: 2000, 
 
     easing: 'swing', 
 
     step: function() { 
 
      $this.text(Math.ceil(this.Counter)); 
 
     } 
 
     }); 
 
    }); 
 
    }, { 
 
    offset: '80%' 
 
    });

#counter { 
 
     position: relative; 
 
     color: #fff; 
 
     margin-top: 600px; 
 
    } 
 
    
 
    .counters { 
 
     padding: 100px 0; 
 
     width: 33.333%; 
 
     float: left; 
 
    } 
 
    
 
    #counter-1 { 
 
     background: #393939; 
 
    } 
 
    
 
    #counter-2 { 
 
     background: #494949; 
 
    } 
 
    
 
    #counter-3 { 
 
     background: #595959; 
 
    } 
 
    
 
    .line-numbers { 
 
     text-align: center; 
 
     display: block; 
 
     font-size: 55px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="counter"> 
 
     <div id="counter-1" class="counters"> 
 
      <span class="line-numbers count">2000</span> 
 
     </div> 
 
     <div id="counter-2" class="counters"> 
 
      <span class="line-numbers count">2500</span> 
 
     </div> 
 
     <div id="counter-3" class="counters"> 
 
      <span class="line-numbers count">150</span> 
 
     </div> 
 
     </section>

Answer 1

können Sie diese Funktion

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

Als Erscheinen auf this answer