Как заставить плагин путевых точек jQuery срабатывать, когда элемент находится в поле зрения, а не прокручивается мимо?
Пожалуйста, посмотрите это:
Как видите, только когда вы прокручиваете первый красный прямоугольник, он становится синим, я бы хотел, чтобы он стал синим, как только он появится в поле зрения. Вот почему второе никогда не становится синим, потому что под ним недостаточно содержимого, чтобы вы могли прокрутить его.
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'
});
});
});
Как заставить его зажечь, как только рассматриваемый элемент виден, а не прокручен мимо?