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

Question

想象一下这是我的页面:

<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/

您可能想要将事件处理程序附加到窗口滚动事件,但John Resig建议不要使用它(向下滚动到"最佳实践").

更新:正如@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());
});