滚动一定数量后如何触发事件？

Question

我正在使用此小代码，对于我的标题img来说，它工作正常。 但是稍后在页面上，我想再次使用相同的效果。 除了从我开始滚动的第一刻起就调用了该动作。 因此，我希望在相关div或一定数量的像素之后执行该操作。 我需要添加什么？

提前致谢！

<script>
    $(window).scroll(function() {
    var s = $(window).scrollTop(),
    opacityVal = (s / 150.0);
    $('.blur_img').css('opacity', opacityVal);
});
</script>

Answer 1

您必须在代码中添加检查：

.scrolltop（）返回用户垂直滚动了多少。

<script>
$(window).scroll(function() {
    var s = $(window).scrollTop();

    if (s > 200) {
        opacityVal = (s / 150.0);
        $('.blur_img').css('opacity', opacityVal);
    }
});
</script>

Answer 2

我发现viewport.js对检测滚动非常有用。

视口向jQuery添加了几个额外的选择器。 使用这些选择器，您可以检查元素是在视口内部还是外部。

因此，当页面稍后的元素进入“视口”时，可以调用您的函数以加载更多内容，或执行其他任何操作。