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

我有一个 h1 位于页面下方。

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

我想在用户滚动到 h1 或将其显示在浏览器视图中时触发警报。

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

我该怎么做呢？

您可以计算offset的元素，然后将其与scroll值如：

$(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!');
   }
});

检查这个演示小提琴 http://jsfiddle.net/n4pdx/

Updated 演示小提琴 http://jsfiddle.net/n4pdx/279/没有警报——而是 FadeIn() 元素

更新了代码以检查元素是否位于视口内。因此，无论您向上还是向下滚动，都可以向 if 语句添加一些规则：

   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
       //Do something
   }

演示小提琴 http://jsfiddle.net/n4pdx/636/