Question

我看到很多网站都有这个功能。例如：我滚动页面直到页脚，当我看到页脚里面的图像开始动画。简而言之，只有在我可视化页脚时，该图像才会启动动画。我怎么能用jQuery做到这一点？

Answer 1

您可以执行以下操作：

$(window).on('scroll', function() {
    if ($('#footer').offset().top <= $(window).scrollTop() + $(window).height()) {
        console.log('footer is inside viewport');
    }
});

基本上，您正在检查文档顶部的距离。必须添加窗口的高度，否则只有在#footer元素位于窗口顶部时才会触发，这将太晚。

Answer 2

$(window).height()给出视口的高度。
$(window).scrollTop()是窗口向下滚动的距离。
$('#footer').offset().top是页脚元素顶部距文档顶部的距离。

通过从3减去2，可以得到从视口顶部到页脚元素顶部的距离。如果它小于1（视口的高度），则页脚在视图中。

$(window).on('scroll', function() {
    if (($('#footer').offset().top - $(window).scrollTop()) < $(window).height()) {
        // Start animation
    }
});

如何在用户可视化页面的某个点时启动jQuery效果

2 个答案: