Question

请看这个：

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

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

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，然后图像的自然长宽比就会取代。

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

4 个答案: