导航包含大量内容的网页时，当用户到达特定元素时触发特定操作变得至关重要。本文演示了如何使用 jQuery 在用户滚动到指定的 HTML 元素时触发事件。
考虑一个 HTML 页面，其中 h1 元素位于最下方：
<code class="html"><h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1></code>
目标是当用户的浏览器视图到达 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 元素的底部是否已达到页面可见部分。
以上是如何使用 jQuery 检测滚动期间元素的可见性？的详细内容。更多信息请关注PHP中文网其他相关文章！
