jquery - 如何仅在视口(viewport)之外的元素上执行jquery Waypoints？

Question

我有一个 block 列表，其中一些仅当您向下滚动时才可见。一旦它们进入视口(viewport)，我需要将不可见的尺寸从 0% 缩放到 100%，这是一种延迟加载效果，但在整个元素上而不是仅在图像上。为此，我向 waypoint 元素添加一个类。Waypoints 还会在页面加载时在视口(viewport)中已有的元素上添加该类。是否可以仅定位尚未在视口(viewport)中的元素？

这是我正在使用的功能:

$('.post').waypoint(function(direction) {
    if (direction === 'down') $(this).addClass('animate');
}, { offset: '101%' });

这是示例链接 http://brainfood.clientapproval.co.uk/

如果向下滚动，您将看到该类已添加到视口(viewport)中已有的元素中。然后您就可以在视口(viewport)之外的元素上看到所需的效果。有没有办法阻止页面加载时在视口(viewport)中已有的元素上执行 Waypoint？或者您能推荐其他方法吗？

Answer 1

你应该试试这个plugin这对于您的情况非常有用，它只会告诉您元素是否在视口(viewport)中(您可以在每次滚动时触发检查)

使用方法很简单:

$('#element').visible();

This basic check will return true if the entire element is visible to the user (within the visual viewport).

检查这个基本的example