当一个元素在视图中而不是滚动过去时，如何让jQuery航点插件触发？

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，因此元素在命中顶部时会触发。因为您想要的是常见的，waypoints包含一个简单的别名，用于设置在整个元素进入视图时触发的偏移量。

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

如果你想让它在元素的任何部分从底部偷看时触发，你应该将其设置为“100%”。

Answer 2

对我不起作用。我有几个同名的类，如果页面加载/ first元素出现在屏幕上，它们都会改变。

jQuery(document).ready(function(){

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

})；

Answer 3

好的。找到了一个运行良好的解决方案。

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