如何在jQuery中检测页面滚动到某一点？

想象这是我的页面：

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

你好

我的段落

当用户向下滚动到带有“myPara”类的段落而不是之前的段落时，如何提醒消息？

如何：

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

下面是一个例子：

您可能会尝试将事件处理程序附加到窗口滚动事件，但是（向下滚动到“最佳实践”）

更新：，每250ms不必要地运行一个函数可能不是个好主意。下面是一个更新的示例，仅在用户第一次滚动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);
    }
});

示例：

$（窗口）。滚动（函数（）{
console.log（$（'#myPara'）.offset（）.top<$（this.height（）+$（this.scrollTop（））；
});

我一直在考虑附加滚动事件的问题（由@AndrewHitaker指出），我最后的想法是不需要每隔x秒添加一个scoll事件处理程序，因为您只需执行一个命令并在回调中检查是否应显示警报。e、 g:

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);
    }
}

---

您可以使用scrollspy jquery插件实现这一点。

---

将页面滚动位置与元素顶部位置进行比较，然后调用函数

jQuery

$（文档）.on（'scroll'，function（）{
if（$（this.scrollTop（）>=$（'.myPara'）.position（）.top）{
console.log（'reach'）；
}
})

你好





















我的段落

使用setInterval不适用于此类操作。正如Reigel的解释，只需使用jQuery滚动监听器answer@StefanoPochet：实际上，这是使用

setInterval

的最佳时机。查看我在答案中链接的文章，了解您不想附加到

的原因。直接滚动
。阅读文章。很高兴知道这一点，现在我认为你的答案是正确的。但我仍然要说，在这种特定情况下，一个更干净、响应更迅速的解决方案是使用onScroll，并将选择器指令放在onScroll代码块之外。类似这样的内容：var myTargetDivPositionTop=$（“.myPara”）.offset（）.top$（window）.scroll（function（）{if（$（window）.scrollTop（）>myTargetDivPositionTop）{doMyStuff（）}}@stefanophochet我认为这不是一个好的答案，因为这个函数在我们甚至不滚动的情况下持续触发事件。你可以通过放置console.log（'Hello World'）；就像这个setInterval（function（）{console.log（'Hello World'））一样；而且这是一项消耗资源的任务。@SteveMcLeod可能不是现在。但可能是6.5年前的事了？也许你现在发布一个更相关的答案会对你有所帮助。对我最有效。非常感谢。非常完美！
function showMessageIfNeeded() {
    var scrollTop = $(window).scrollTop();
    var targetTop = $(".myPara").offset().top;
    if (scrollTop > targetTop) {
        alert('Show message');
        window.clearInterval(showMessageInterval);
    }
}

$('.myPara').on('scrollSpy:enter', function() {
    console.log('enter:', $(this).attr('id'));
});

$('.myPara').on('scrollSpy:exit', function() {
    console.log('exit:', $(this).attr('id'));
});

$('.tile').scrollSpy();