修复了容器 Div 中的 Div 仅在到达浏览器顶部时向下滚动

Question

我做了一些研究，但很困惑，因为有人说 javascript 是解决方案。

但是，我在主容器中有一个菜单，位于网页中间。

我想要做的是，我希望菜单只有在与浏览器顶部接触时才会随着浏览器向下滚动。例如当页面加载时，我希望菜单保持在原来的位置（即在网站中间），当用户向下滚动时，菜单仍然保持在原来的位置，但是当菜单与浏览器顶部接触时，它跟随滚动，直到网页的最底部对用户可见。

此刻，当我给它一个位置时：固定； ，它一直粘在浏览器的顶部。

知道如何使用 CSS 和 HTML 甚至 javascript 来做到这一点吗？非常感激。

这是我正在使用的：

**HTML:**

<div id="main-container">
 <div id="headbody"></div>
 <div id="menu-midddle"></div> --// this is the menu in the middle of the page \\--
</div>

**CSS:**  

#main-container {
width: 1000px;
height: 2200px;
background-color: #FFFFFF;
margin: 0px auto;
top: 0px;
position:relative;
border-style:solid;
border-width:1px;
border-color:#dfe3ee;
}
#headbody {
width:1000px;
height:45px;
border-style:solid;
border-width:1px;
border-color:#588039;
background-color: #588039;
margin: 0px auto;
position: fixed;
z-index: 2;
top:0;
} 
#menu-middle {
width:1000px;
height:45px;
border-style:solid;
border-width:1px;
border-color:#588039;
background-color: #588039;
margin: 0px auto;
position: fixed;
z-index: 2;
top:0;
} 

#main-container {
width: 1000px;
height: 2200px;
background-color: #FFFFFF;
margin: 0px auto;
top: 0px;
position:relative;
border-style:solid;
border-width:1px;
border-color:#dfe3ee;
}

jsfiddle

Answer 1

你可能想看看 bootstrap affix.js

http://getbootstrap.com/javascript/#affix

你可以在http://getbootstrap.com的菜单上看到行为

这是来自 bootstrap 的 affix.js 教程：

http://tutsme-webdesign.info/bootstrap-3-affix