如何知道窗口頂部何時到達容器的特定頂部？

我試圖達到類似this頁面顯示的效果：當窗口的頂部到達特定容器的頂部時，我希望它在窗口的頂部被粘住。如何知道窗口頂部何時到達容器的特定頂部？

我在SO中發現了this問題，它處理這種行爲。但是當用戶到達一個特定的px時，我並沒有看容器，而是當用戶到達一個容器的開始時。我希望這樣，因爲頁面頂部和容器頂部之間的大小可能會有所不同。

我的問題是：

- >我怎麼能知道，當我已經達到了一個特定容器的頂部。
- >如果該容器的位置是：相對的，因爲它具有相對定位的幾個元素，因此我不能使用固定的，我該怎麼辦？
- >一旦我向上滾動，我如何重置容器，並且達到它定位的位置？

感謝

2013-01-31 Hommer Smith

您可以使用固定的。「一個絕對定位的元素相對於_nearest定位的祖先_定位」。 https://developer.mozilla.org/en-US/docs/CSS/position; http://jsfiddle.net/honnza/3nD8t/ –

使用此：

$(window).scroll(function(e){ 
$el = $('.class_of_fixedElement or #id_of_fixedelement'); 
if ($(this).scrollTop() > 200 && $el.css('position') != 'fixed'){ 
$('.fixedElement').css({'position': 'fixed', 'top': '0px'}); 
} 
});

取代200與您want.as儘快scrollTop的到達那裏，你的元素得到固定到頂部的任何像素。

來源

2013-01-31 11:36:45

但我怎麼知道我的容器的頂部在哪裏加載頁面？我不知道它是因爲頁面頂部和頂部之間的距離可能會有所不同。 –

@HommerSmith嘗試'.offset（）。top' –

感謝您的回答。我想知道兩件事情，而且我編輯了我的問題。一旦我向上滾動，我需要將容器放回原位。我怎麼能這樣做？ –

如何知道窗口頂部何時到達容器的特定頂部？

回答

相關問題