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 advises against it（向下滚动到“最佳实践”）。

更新：As @AbdulJabbarWebBestow points out，每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());
});

Answer 3

我一直在考虑附加滚动事件的问题（由@AndrewWhitaker指出），我最后的想法是每隔x秒就不需要添加一个scoll事件处理程序，因为你可以只执行一个{ {3}}并检查回调是否应显示警报。 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);
    }
}

Answer 4

将页面滚动位置与元素的顶部位置进行比较，而不是调用函数。

jQuery

$(document).on('scroll', function() {
  if ($(this).scrollTop() >= $('.myPara').position().top) {
    console.log('Reached');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<p>hello</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p class="myPara">My Paragraph</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

ES6（纯JS，没有jQuery）

var target = document.querySelector('.myPara');

document.addEventListener('scroll', () => {
  if (window.scrollY >= target.getBoundingClientRect().top) {
    console.log('Reached');
  }
})

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

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

4 个答案: