javascript - vertical - waypoints js jquery 3

¿Cómo hacer que el complemento de jQuery waypoints se active cuando un elemento esté a la vista y no se haya pasado?

Question

Por favor vea esto:

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

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

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 se active tan pronto como se vea el elemento en cuestión y no se haya pasado?

Answer 1

DE ACUERDO. 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%'' });

Answer 2

La opción de offset determina dónde, en relación con la parte superior de la vista, el punto de ruta debe dispararse. Por defecto, es 0, por lo que su elemento se dispara cuando llega a la parte superior. Debido a que lo que quieres es común, los puntos de ruta incluyen un alias simple para configurar el desplazamiento para que se active cuando todo el elemento esté a la vista.

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

Si quieres que se dispare cuando cualquier parte del elemento se asoma desde la parte inferior, deberías configurarlo en ''100%''.

Answer 3

No trabajara para mi 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'' }); 

});