当元素在视图中且未滚动过去时，如何使 jQuery 航点插件触发？答案

【问题标题】：How to make jQuery waypoints plugin fire when an element is in view and not scrolled past?当元素在视图中且未滚动过去时，如何使 jQuery 航点插件触发？
【发布时间】：2012-09-19 14:43:36
【问题描述】：

请看这个：

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

    });


});

一旦看到有问题的元素而不是滚动过去，如何让它触发？

【问题讨论】：

标签： javascript jquery jquery-waypoints

【解决方案1】：

offset 选项决定了航点应该在相对于视口顶部的位置触发。默认情况下它是 0，所以你的元素会在它到达顶部时触发。因为你想要的是常见的，所以航点包括一个简单的别名，用于设置当整个元素进入视野时触发的偏移量。

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

如果您希望它在元素的任何部分从底部窥视时触发，则应将其设置为“100%”。

【讨论】：

@imakewebthings 抱歉，我不知道如何在 stackoverflow 上与您联系，但我正在努力解决与 Waypoints 相关的问题，您可以看看吗？ CLICK HERE
如果您阅读本文，您可以更清楚地了解航点。 script-tutorials.com/…@tk123
我建议要么不要使用 bipon 链接的教程，要么不要使用它。它几乎是 4 年前写的，有几个主要版本已经过时了。
嗨，我知道这是一个老问题了，但我想知道是否有办法将偏移量设置为向下的顶部和向上的底部，而无需创建两个单独的航路点？
@kaiTaylor 不，但听起来您可能想要使用Waypoint.Inview，它为您提供了enter、entered、exit 和exiting 方法，它们无论如何都会触发这些事情发生在哪一边。

【解决方案2】：

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

jQuery(document).ready(function(){

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

});

【讨论】：

【解决方案3】：

好的。找到了一个很好的解决方案。

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

【讨论】：

【解决方案4】：

如果你想用 css 解决这个问题，那么你也可以使用下面的 css 来解决。

img[data-src]::before {
    content: "";
    display: block;
    padding-top: 70%;
  }

我们正在尝试使用伪元素（例如 ::before 和 ::after）来为 img 元素添加装饰。

浏览器不会渲染图像的伪元素，因为 img 是一个替换元素，这意味着它的布局由外部资源控制。

但是，该规则有一个例外：如果图像的 src 属性无效，浏览器将呈现其伪元素。所以，如果我们把一张图片的src存储在data-src中，而src是空的，那么我们可以使用伪元素来设置纵横比：

只要 data-src 变成 src，浏览器就会停止渲染 ::before 并取而代之的是图像的自然纵横比。

【讨论】：