jQuery 如何检测页面滚动到jQuery中的某个点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5036850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect page scroll to a certain point in jQuery?
提问by Jason
Imagine this is my page:
想象一下这是我的页面：
<p>hello</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p class="myPara">My Paragraph</p>
How can I alert a message when the user has scrolled down to the paragraph with the class "myPara" and not before then?
当用户向下滚动到具有“myPara”类的段落而不是在此之前，我如何提醒消息？
回答by Andrew Whitaker
How about:
怎么样：
var target = $(".myPara").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
alert("made it!");
clearInterval(interval);
}
}, 250);
Here's an example: http://jsfiddle.net/andrewwhitaker/24M3n/1/
这是一个例子：http: //jsfiddle.net/andrewwhitaker/24M3n/1/
You might be tempted to attach an event handler to the window scroll event, but John Resig advises against it(Scroll down to "Best Practices").
您可能想将事件处理程序附加到窗口滚动事件，但John Resig 建议不要这样做（向下滚动到“最佳实践”）。
Update: As @AbdulJabbarWebBestow points out, it might be a bad idea to unnecessarily run a function every 250ms. Here's an updated example that only runs once, 250ms after the first time a user scrolls:
更新：正如@AbdulJabbarWebBestow 指出的那样，每 250 毫秒不必要地运行一个函数可能是一个坏主意。这是一个更新的示例，仅在用户第一次滚动 250 毫秒后运行一次：
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);
}
});
Example:http://jsfiddle.net/24M3n/858/
回答by Reigel
$(window).scroll(function(){
console.log($('#myPara').offset().top < $(this).height() + $(this).scrollTop());
});
回答by Manolo
I had been thinking about the problem of attaching a scroll event (pointed out by @AndrewWhitaker), and my final thoughts are that there is no need to add a scoll event handler every x seconds, since you can just execute a setIntervaland check in the callback whether the alert should be shown or not. e.g:
我一直在考虑附加滚动事件的问题（由@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"
The showMessageIfNeededcallback would check the scrollTopvalue and show the message if needed. If the message is displayed, the setIntervalhave to be cleared to avoid the next executions:
该showMessageIfNeeded回调将检查scrollTop值，并根据需要显示的消息。如果显示该消息，则setInterval必须清除该消息以避免下一次执行：
function showMessageIfNeeded() {
var scrollTop = $(window).scrollTop();
var targetTop = $(".myPara").offset().top;
if (scrollTop > targetTop) {
alert('Show message');
window.clearInterval(showMessageInterval);
}
}
回答by desbest
You can do this with the scrollspy jquery plugin. https://github.com/thesmart/jquery-scrollspy
您可以使用 scrollspy jquery 插件来做到这一点。 https://github.com/thesmart/jquery-scrollspy
$('.myPara').on('scrollSpy:enter', function() {
console.log('enter:', $(this).attr('id'));
});
$('.myPara').on('scrollSpy:exit', function() {
console.log('exit:', $(this).attr('id'));
});
$('.tile').scrollSpy();
