如何检测页面滚动到jQuery中的某个点？

想象一下，这是我的网页：

<p>hello</p> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <p class="myPara">My Paragraph</p> 

当用户向下滚动到类“myPara”的段落时，我该如何警告一条消息？

Answer 1

怎么样：

 var target = $(".myPara").offset().top; var interval = setInterval(function() { if ($(window).scrollTop() >= target) { alert("made it!"); clearInterval(interval); } }, 250); 

这是一个例子： http : //jsfiddle.net/andrewwhitaker/24M3n/1/

你可能会试图附加一个事件处理程序到窗口滚动事件，但约翰Resigbuild议反对它 （向下滚动到“最佳实践”）。

更新 ： 正如@AbdulJabbarWebBestow指出 ，不必要的每250毫秒运行一个函数可能是一个坏主意。 下面是一个更新的示例，仅在用户第一次滚动后250ms运行一次：

 var target = $(".mypara").offset().top, timeout = null; $(window).scroll(function () { if (!timeout) { timeout = setTimeout(function () { console.log('scroll'); clearTimeout(timeout); timeout = null; if ($(window).scrollTop() >= target) { alert('made it'); } }, 250); } }); 

例如： http : //jsfiddle.net/24M3n/858/

Answer 2

 $(window).scroll(function(){ console.log($('#myPara').offset().top < $(this).height() + $(this).scrollTop()); }); 

Answer 3

我一直在考虑附加一个滚动事件的问题（由@AndrewWhitaker指出），我最后的想法是，没有必要每隔x秒添加一个scoll事件处理程序，因为您只需执行setInterval并签入是否应该显示警报的callback。 例如：

 var showMessageInterval = window.setInterval(showMessageIfNeeded, 500); // you could adjust the interval to the animation duration of the // message showing. In this way, the delay will be more "natural" 

showMessageIfNeededcallback将检查scrollTop值，并在需要时显示消息。 如果显示消息，则必须清除setInterval以避免下一次执行：

 function showMessageIfNeeded() { var scrollTop = $(window).scrollTop(); var targetTop = $(".myPara").offset().top; if (scrollTop > targetTop) { alert('Show message'); window.clearInterval(showMessageInterval); } }