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