Come far scattare il plugin per waypoint jQuery quando un elemento è in vista e non scorre oltre?

Question

vedi prego questo:

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

Come si può vedere solo quando si scorre oltre il primo rettangolo rosso diventa blu, vorrei che diventi blu nel momento in cui entra in vista. Questo è il motivo per cui il secondo non diventa mai blu perché non c'è abbastanza contenuto al di sotto di esso per consentire di scorrere oltre.

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' 
     }); 

    }); 


}); 

Come per renderlo fuoco il più presto l'elemento in questione si vede e non scorrere passato?

Answer 1

L'opzione offset determina dove deve essere attivato il waypoint in relazione alla parte superiore della finestra. Di default è 0, quindi il tuo elemento si attiva quando raggiunge la cima. Poiché ciò che si desidera è comune, i waypoint includono un semplice alias per impostare l'offset per attivare quando l'intero elemento viene visualizzato.

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

Se si desidera al fuoco quando qualsiasi parte dei peeks elemento in dal basso, si dovrebbe impostare a '100%'.

Answer 2

Non funzionerà per me. Ho classi server con lo stesso nome e saranno tutte modificate se la pagina viene caricata/il primo elemento è sullo schermo.

jQuery(document).ready(function(){ 

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

});

Answer 3

OK. Trovato una soluzione che funziona bene.

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