首页 > web前端 > js教程 > 如何在 jQuery 中滚动到特定元素时触发事件?

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

Barbara Streisand
发布: 2024-11-02 13:41:02
原创
977 人浏览过

How to Trigger an Event When Scrolling to a Specific Element in 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板