Wie wird das jQuery-Wegpunkt-Plugin ausgelöst, wenn ein Element in Sicht ist und nicht vorbeigescrollt wird?

Question

Bitte sehen:

http://jsfiddle.net/5Zs6F/2/

Wie Sie sehen können, wenn Sie die erste rote Rechteck bewegen vorbei blau wird, ich es in dem Moment blau drehen möchte es in den Blick kommt. Das ist der Grund, warum der zweite nie blau wird, weil nicht genug Inhalt darunter liegt, damit Sie darüber scrollen können.

HTML:

Scoll this window pane 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<div class="box"></div> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<div class="box"></div> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 

CSS:

.box { width: 250px; height: 100px; border: 2px solid red; } 

jQuery:

$.getScript('http://imakewebthings.com/jquery-waypoints/waypoints.min.js', function() { 


    $('.box').waypoint(function() { 

     $(this).css({ 
      borderColor: 'blue' 
     }); 

    }); 


}); 

Wie es so schnell machen Feuer, wie das betreffende Element zu sehen ist und nicht in der Vergangenheit geblättert?

Answer 1

Die Option offset legt fest, wo in Bezug auf den oberen Bereich des Ansichtsfensters der Wegpunkt ausgelöst werden soll. Standardmäßig ist es 0, also wird Ihr Element ausgelöst, wenn es oben ankommt. Da das, was Sie wollen, häufig ist, enthält Wegpunkte einen einfachen Alias, um den Offset festzulegen, der ausgelöst wird, wenn das gesamte Element sichtbar wird.

$('.box').waypoint(function() { 
    $(this).css({ 
    borderColor: 'blue' 
    }); 
}, { offset: 'bottom-in-view' }); 

Wenn Sie es wollen, feuern, wenn ein Teil des Elements späht in von unten, sollten Sie es auf ‚100%‘ eingestellt.

Answer 2

Funktioniert nicht für mich. Ich habe mehrere Klassen mit demselben Namen und sie werden alle geändert, wenn die Seite geladen wird/erstes Element ist auf dem Bildschirm.

jQuery(document).ready(function(){ 

jQuery('.zoomInDownInaktiv').waypoint(function() { 
    //jQuery(this).removeClass('zoomInDownInaktiv'); 
    jQuery(this).addClass('zoomInDown'); 
}, { offset: 'bottom-in-view' }); 

});

Answer 3

OK. Gefunden eine Lösung, die gut funktioniert.

jQuery('.zoomInDownInaktiv').waypoint(function(direction) { 
    if (direction === "down") { 
     jQuery(this.element).removeClass('zoomInDownInaktiv'); 
     jQuery(this.element).addClass('zoomInDown'); 
    } 
}, { offset: '80%' });