如何在 jQuery 中滚动到特定元素时触发事件？

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

问题

用户希望在向下滚动网页并到达时显示警报消息特定的 h1 元素。他们尝试使用scroll()事件，但没有成功。

解决方案

要确定 h1 元素何时进入浏览器视图，我们需要计算它相对于顶部的偏移量并进行比较它与当前的滚动值。这是修改后的代码：

<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) && wS < hT && wS+wH > hT+hH){
       console.log('H1 on the view!'); // or trigger any desired event
   }
});</code>

增强

• 演示小提琴：没有警报的实时示例，而是在 h1 元素中淡入淡出。
• 更新的代码：现在检查元素是否在视口内，无论滚动方向如何。
• 更新的演示小提琴：显示更新代码的功能.

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