如何使用 jQuery 检测滚动期间元素的可见性？

使用 jQuery 滚动期间检测元素可见性

导航包含大量内容的网页时，当用户到达特定元素时触发特定操作变得至关重要。本文演示了如何使用 jQuery 在用户滚动到指定的 HTML 元素时触发事件。

设置元素

考虑一个 HTML 页面，其中 h1 元素位于最下方：

<code class="html"><h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1></code>

使用 jQuery 触发事件

目标是当用户的浏览器视图到达 h1 元素时显示警报。虽然人们最初可能会尝试在 h1 元素上使用 scroll() 方法：

<code class="js">$('#scroll-to').scroll(function() {
    alert('you have scrolled to the h1!');
});</code>

这种方法不会产生所需的结果。相反，需要计算元素相对于页面的偏移量，并将其与滚动位置进行比较。

解决方案

<code class="js">$(window).scroll(function() {
    var hT = $('#scroll-to').offset().top,
        hH = $('#scroll-to').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (hT + hH - wH)) {
        console.log('H1 on the view!');
    }
});</code>

上面的代码检查 h1 元素的底部是否已达到页面可见部分。

增强功能

• 演示小提琴：亲身体验功能。
• FadeIn() 而不是 Alert： 使用 fadeIn() 无缝地设置元素可见性的动画。
• 元素可见性检查： 修改脚本以检测元素是否完全在视口内，无论滚动方向如何。

以上是如何使用 jQuery 检测滚动期间元素的可见性？的详细内容。更多信息请关注PHP中文网其他相关文章！