修复了容器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的菜单上看到该行为。

这是来自引导程序的affix.js教程：

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