当一个元素在视图中而不是滚动过去时,如何使jQuery waypoints插件触发？

Question

请看这个:

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

正如你只能看到滚过第一个红色矩形时它变成蓝色,我希望它在进入视图时变成蓝色.这就是为什么第二个永远不会变成蓝色,因为它下面没有足够的内容允许你滚过它.

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

    });


});

如果看到有问题的元素并且没有滚动过去,如何让它成功？

Answer 1

该offset选项确定航点应触发的视口顶部的位置.默认情况下它为0,因此当元素击中顶部时会触发它.因为您想要的是常见的,所以航点包括一个简单的别名,用于在整个元素进入视图时将偏移设置为触发.

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

如果要在元素的任何部分从底部窥视时触发它,则应将其设置为"100%".