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

How to start a jQuery effect when a user visualizes a point of the page

本文关键字：启动 jQuery 效果 用户 可视化      更新时间：2023-09-26

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

您可以执行以下操作：

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

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

  1. $(window).height()提供视口的高度。
  2. $(window).scrollTop()是窗口向下滚动了多远。
  3. $('#footer').offset().top是页脚元素顶部与文档顶部的距离。

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

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