如何僅當滾動達到某個點時才使用jquery顯示內容？

Question

我一直在使用JQuery，但從來沒有像這樣的工作。

我所試圖做的是這樣的：

當用戶向下滾動到頁面的頁腳，我再想使用jQuery開始顯示的內容10個段落加載正確的頁腳下。我怎樣才能使用JQuery來做到這一點？任何現有的插件或提示？

我查了無限的滾動和類似的東西，但我不知道如何觸發內容的顯示，只有當用戶是過去的頁腳。

Answer 1

其實正確的代碼需要顯示段落，因爲頁腳是可見的，所以您必須添加窗口高度參數：

var target = $("#footer").offset().top-$(window).height(); 

像這樣做：

var target = $("#footer").offset().top-$(window).height(); 
$(document).scroll(function() { 
    if ($(window).scrollTop() >= target) { 
     $(".content").show(); 
    } 
}); 

如果不設置窗口高度頁腳必須在你的窗口，我不認爲的頂部到達是你想要的。

你可以在這裏嘗試一下：JSFiddle

Answer 2

將偵聽器綁定到滾動事件並監視滾動位置。一旦它傳遞了一定的值，顯示內容。

您可以使用.scrollTop()獲取滾動位置，並將其與固定值或頁腳位置.offset()進行比較。不要忘記添加窗口高度，以便在頁腳可見時立即觸發。

例如：

$(document).scroll(function() { 
    var value = $("#footer").offset().top, 
     position = $(document).scrollTop() + $(window).height(); 
    if (position >= value) { 
     $(".content").show(); 
    } 
}); 

爲了確保如果頁腳恰好是可見的，而無需滾動的內容顯示，你可以準備觸發滾動事件：

$(document).ready(function() { 
    $(document).scroll(); 
});