javascript - 当元素在视图中且未滚动过去时，如何使 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，所以你的元素会在它到达顶部时触发。因为您想要的是常见的，所以航点包含一个简单的别名，用于设置在整个元素进入视野时触发的偏移量。

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

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

Answer 2

好的。找到了一个可以正常工作的解决方案。

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

Answer 3

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

jQuery(document).ready(function(){

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

});

Answer 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 并且图像的自然纵横比接管。