Javascript 当一个元素在视图中并且没有滚动过去时，如何使jQuery waypoints插件启动？

请看这个：

只有当你滚动过第一个红色矩形时，它才会变成蓝色，我希望它进入视图时会变成蓝色。这就是为什么第二个永远不会变成蓝色，因为它下面没有足够的内容让你滚动过去

HTML:

jQuery：

$.getScript('http://imakewebthings.com/jquery-waypoints/waypoints.min.js', function() {


    $('.box').waypoint(function() {

        $(this).css({
            borderColor: 'blue'
        });

    });


});

---

如何在看到相关元素且未滚动过去时立即触发？

偏移

选项确定相对于视口顶部的航路点应触发的位置。默认情况下，它是0，因此元素在到达顶部时激发。因为您想要的是通用的，所以航路点包括一个简单的别名，用于在整个元素进入视图时将偏移设置为激发

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

如果您想在元素的任何部分从底部窥视时激发它，则应将其设置为“100%”。
对我不起作用。我有几个同名的类，如果页面loads/first元素在屏幕上，它们都会改变

jQuery(document).ready(function(){

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

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

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

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

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

我们正在尝试使用伪元素（例如：：before和：：after）向img元素添加修饰

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

但是，该规则有一个例外：如果图像的src属性无效，浏览器将呈现其伪元素。因此，如果我们将图像的src存储在数据src中，并且src为空，那么我们可以使用伪元素来设置纵横比：

一旦数据src变为src，浏览器将停止渲染：：before，图像的自然纵横比将接管。
@imakewebthings抱歉，我不知道如何在stackoverflow上与您联系，但我正在处理一些与航路点相关的问题。您能看一下吗？我想如果你读了这篇文章，你可以更清楚地了解航路点@tk123I建议不要使用bipon已链接的教程，或者使用大量的盐。这是大约4年前写的，有几个主要版本已经过时了。嗨，我知道这是一个老问题，但我想知道是否有一种方法可以在不创建两个单独的航路点的情况下，将偏移设置为向下的顶部和向上的底部？@kaiTaylor没有，但听起来你可能想使用，它提供了方法
enter
，
entered
，
exit
，以及
exit
，无论这些事情发生在哪一侧，这些方法都会触发。
    jQuery('.zoomInDownInaktiv').waypoint(function(direction) {
    if (direction === "down") {
        jQuery(this.element).removeClass('zoomInDownInaktiv');
        jQuery(this.element).addClass('zoomInDown');
    }
}, { offset: '80%' });

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