¿Cómo hacer que el complemento de jQuery waypoints se active cuando un elemento esté a la vista y no se haya pasado?
Por favor vea esto:
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 que 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?