Ohai！使用scrollTop（）移動一個DIV，當溢出-y：滾動的DIV滾動時
我想在我的網站上的菜單中添加一點效果。以下是我想要創建的事件：
1-用戶加載頁面：菜單距離頁面頂部36px;
2-用戶開始向下滾動閱讀內容;
3-當用戶滾動正好36px時，菜單移動到頁面的最頂部並停留在那裏;
4-用戶繼續向下滾動，菜單仍然固定在最上方;
5-用戶向上滾動，直到頂部小於36px，菜單返回到第一個位置，距離頂部36px。
這很有趣，我剛剛注意到Stack Overflow正在使用一些代碼來完成對「類似問題」框的完全相同的操作，當我編寫新問題時，我在頁面的右側有一個框。如果你想有一個概述，只需start creating a new question並觀看它。我試圖找出他們正在使用的東西，但失敗了。
對於我的效果，我使用了scrollTop() jQuery屬性，關聯到scroll()之一。這裏是代碼：
$(document).scroll(function() {
if ($(document).scrollTop() >= 36) {
$('#menu').css({'top': '0px'});
} else {
$('#menu').css({'top': '36px'});
}
});
這是工作的document，這意味着整個頁面的主體。
現在的問題是，我想在具有overflow-y :scroll屬性的article元素中使用它。當我談論<article>元素時，我指的是HTML5文檔中使用的元素（例如<nav>,<aside>,<section>,<footer> ...）。
因此，JQ在document中找不到任何滾動，這是真的，因爲現在，整個頁面中的唯一滾動位於article元素內。身體從不移動，它的目的。
所以，我想這一點：
$('article').scroll(function() {
if ($('article').scrollTop() >= 36) {
$('#menu').css({'top': '0px'});
} else {
$('#menu').css({'top': '36px'});
}
});
而且也是這樣：
$(document).scroll(function() {
if ($(document).scrollTop() >= 36) {
$('#menu').css({'top': '0px'});
} else {
$('#menu').css({'top': '36px'});
}
});
即使這樣：
$('#insidecontent').scroll(function() {
if ($('#insidecontent').scrollTop() >= 36) {
$('#menu').css({'top': '0px'});
} else {
$('#menu').css({'top': '36px'});
}
});
#insidecontent是遵循article元素div名因爲您稍後可以在代碼中看到我將由Jsfid提供給您的代碼dle.net。
而這是行不通的。不是因爲article元素，我正在使用另一個jQuery代碼來動態調整高度，這也正好聚焦article而沒有任何問題。我沒有嘗試過。
http://jsfiddle.net/fKkML/1/
在這裏你可以找到的第一個版本（$(document)）和整個代碼不的overflow-y: scroll，看我說的是哪個效果。它正在工作，只需滾動結果框。
http://jsfiddle.net/BCuez/7/
這裏與overflow-y: scroll版本開啓和$('article')，這是行不通的。
注意：在第二個鏈接中，Jsfiddle.net以相同的方式處理溢出，看起來這是滾動的整個主體。但正如你所看到的，無論如何，這個效應都搞砸了。您可以通過創建文件在本地計算機上嘗試此代碼，您會看到。注意2：在這些演示中，我不得不在margin-top: 70px到article之間添加一個margin-top: 70px，但在真實和完整的代碼中不需要它。注3：我是HTML5/CSS3的「專業」用戶，但是不是的jQuery，這是我第一次在Web的幫助下做我自己的JQ代碼。我對這個問題非常不滿意，所以如果你能詳細說明你的答案，以幫助我正確理解它，我會非常感謝你。
我在發佈之前先搜索答案。例如我發現this subject有點與我的相關，但不是真的。我沒有找到任何真正能夠幫助我的人，或者真的會像我一樣。
非常感謝您給我的幫助。我願意以其他方式獲得相同的結果，但這似乎與工作非常接近。
我將'article'的'height：auto;'改爲'height：200px;'並且它正在工作。奇怪的是它只能在JSFiddle.net空間中工作。即使我將三個盒子中的每個字符複製粘貼到新的.html和.css文件中，它都不起作用。我不明白。查看這裏的工作結果： http://jsfiddle.net/BCuez/10/ – Orphal