如何在jQuery中检测页面滚动到某一点？
如何在jQuery中检测页面滚动到某一点？
提问于 2011-02-18 09:46:29
假设这是我的页面：
<p>hello</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p class="myPara">My Paragraph</p>当用户向下滚动到带有"myPara“类的段落而不是在此之前时，我如何提醒消息？
回答 5
Stack Overflow用户
发布于 2011-02-18 09:54:40
这样如何：
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/
您可能会想将事件处理程序附加到窗口滚动事件，但使用John Resig advises against it (向下滚动到“最佳实践”)。
更新：As @AbdulJabbarWebBestow points out，不必要地每250ms运行一次函数可能不是一个好主意。下面是一个更新的例子，它只运行一次，在用户第一次滚动后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);
}
});Stack Overflow用户
发布于 2011-02-18 10:00:43
$(window).scroll(function(){
console.log($('#myPara').offset().top < $(this).height() + $(this).scrollTop());
});Stack Overflow用户
发布于 2016-05-05 18:47:43
我一直在考虑附加滚动事件的问题(由@AndrewWhitaker指出)，我的最终想法是没有必要每隔x秒添加一个scoll事件处理程序，因为您只需执行一个setInterval并在回调中检查是否应该显示警报。例如：
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"如果需要，showMessageIfNeeded回调将检查scrollTop值并显示消息。如果显示该消息，则必须清除setInterval以避免下一次执行：
function showMessageIfNeeded() {
var scrollTop = $(window).scrollTop();
var targetTop = $(".myPara").offset().top;
if (scrollTop > targetTop) {
alert('Show message');
window.clearInterval(showMessageInterval);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5036850
复制相关文章
相似问题
腾讯云开发者
