javascript – 当用户滚动到特定元素 – 使用jQuery时触发事件

我有一个h1是一个页面。

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

我想在用户滚动到h1时触发警报,或者在浏览器的视图中触发警报。

$('#scroll-to').scroll(function() {
     alert('you have scrolled to the h1!');
});

我该怎么办?

您可以计算元素的偏移量,然后将其与滚动值进行比较,如:

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH)){
       alert('you have scrolled to the h1!');
   }
});

检查这个Demo Fiddle

更新Demo Fiddle无警报 – 改为FadeIn()元素

http://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 当用户滚动到特定元素 – 使用jQuery时触发事件