網頁scroll - 如何檢測頁面滾動到jQuery中的某個點?




scroll錨點 (2)

想像一下這是我的頁面:

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

這是一個例子: http://jsfiddle.net/andrewwhitaker/24M3n/1/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/ http://jsfiddle.net/24M3n/858/


我一直在考慮附加滾動事件的問題(由@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);
    }
}






jquery