如何使用 jQuery 在用户到达特定元素时触发事件？

当用户使用 jQuery 到达特定元素时触发事件

在网页设计中，当用户滚动到特定元素时触发事件非常有用在一页上。例如，您可能希望在用户到达某个点时显示通知或激活动画。

问题：

考虑一个位置较远的 h1 元素向下翻页：

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

您想要在用户滚动到此 h1 元素或在该 h1 元素视图内时触发警报或执行其他操作。

解决方案：

这个问题的解决方案在于利用 jQuery 的滚动事件并计算元素相对于浏览器视口的偏移量和可见性。下面是分步演示：

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

这段代码片段：

1. 计算 h1 的偏移量： 它决定了 h1 之间的距离h1 元素的顶部和视口的顶部。
2. 确定 h1 的高度：计算 h1 元素的高度。
3. 检索视口的高度：计算浏览器视口的高度。
4. 获取当前滚动位置：捕获页面当前的垂直滚动位置。
5. 比较偏移量和滚动位置：它检查当前滚动位置是否在 h1 元素顶部和底部的范围内，同时考虑元素和视口的高度。
6. 触发事件：当满足条件时，表明 h1 元素在视图中，它会执行所需的操作，例如显示警报或调用动画。

替代实现：

您可以使用此方法在 h1 元素变得可见时淡入它，而不是显示警报：

<code class="javascript">$('#scroll-to').fadeIn();</code>

以上是如何使用 jQuery 在用户到达特定元素时触发事件？的详细内容。更多信息请关注PHP中文网其他相关文章！