Как сделать jQuery waypoints плагином, когда элемент находится в поле зрения и не прокручивается мимо?

Пожалуйста, смотрите следующее:

Как вы можете видеть, только когда вы прокручиваете первый красный прямоугольник, он становится синим, я бы хотел, чтобы он стал синим с момента его появления. Вот почему второй никогда не становится синим, потому что под ним недостаточно содержимого, чтобы вы могли прокручивать его.

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

    });


});

Как заставить его срабатывать, как только этот элемент просматривается и не прокручивается мимо?

Ответ 1

Параметр offset определяет, где по отношению к верхней части окна просмотра должна срабатывать путевая точка. По умолчанию это 0, поэтому ваш элемент срабатывает, когда он попадает в верхнюю часть. Поскольку то, что вы хотите, является общим, waypoints включает простой псевдоним для установки смещения, который срабатывает, когда весь элемент появляется в поле зрения.

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

Если вы хотите, чтобы он срабатывал, когда какая-либо часть элемента заглядывала снизу, вы должны установить его на "100%".

Ответ 2

Не будет работать для меня. У меня есть серверные классы с тем же именем, и все они будут изменены, если страница загружается/первый элемент на экране.

jQuery(document).ready(function(){

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

});

Ответ 3

OK. Нашел решение, которое отлично работает.

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