My Paragraph
当用户向下滚动到带有"myPara“类的段落而不是在此之前时,我如何提醒消息?">假设这是我的页面:
<p>hello</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p class="myPara">My Paragraph</p>
当用户向下滚动到带有"myPara“类的段落而不是在此之前时,我如何提醒消息?
发布于 2011-02-18 01: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);
}
});
发布于 2011-02-18 02:00:43
$(window).scroll(function(){
console.log($('#myPara').offset().top < $(this).height() + $(this).scrollTop());
});
发布于 2016-05-05 10: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);
}
}
https://stackoverflow.com/questions/5036850
复制