¿Cómo hacer que el plugin jQuery waypoints se dispare cuando un elemento está a la vista y no se desplaza?

Question

favor ver esto:

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

Como se puede ver sólo cuando se desplaza más allá del primer rectángulo rojo se vuelve azul, me gustaría que se vuelve azul el momento en que entra a la vista. Esta es la razón por la que el segundo nunca se vuelve azul porque no hay suficiente contenido debajo para permitirle pasar de largo.

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

    }); 


}); 

Cómo hacer que el fuego tan pronto como el elemento en cuestión se ve y no se desplaza pasado?

Answer 1

La opción offset determina dónde, en relación con la parte superior de la ventana gráfica, debe dispararse el punto de ruta. Por defecto es 0, por lo que su elemento se dispara cuando llega a la cima. Como lo que desea es común, los puntos intermedios incluyen un alias simple para configurar el desplazamiento para que se dispare cuando se visualiza todo el elemento.

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

Si desea que se dispara cuando cualquier parte de los picos de elementos en desde el fondo, debe ponerlo a '100%'.

Answer 2

No funcionará para mí. Tengo varias clases con el mismo nombre y todas cambiarán si la página se carga/el primer elemento está en la pantalla.

jQuery(document).ready(function(){ 

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

});

Answer 3

OK. Encontré una solución que funciona bien.

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