Se corrigió Div dentro de un contenedor Div para desplazarse solo hacia abajo al llegar a la parte superior del navegador

I have done some research and quite confused as some say javascript would be the solution.

However, I have a menu within the main container and is the in the middle of the webpage.

What I want to be able to do is that I want the menu to only scroll down with the browser once coming in contact with the browser's top. e.g. when the page loads, I want the menu to stay where it is (i.e in the middle of the website) and when the user scrolls down, the menu still stays where it is but when the menu comes in contact to the top of browser, it follows the scroll, making it visible to the user till the very bottom of the webpage.

At the moment, when I give it a position: fixed; , it sticks all the way top of the browser.

Any idea how I can do this with CSS and HTML or even javascript? much appreciated.

Esto es lo que estoy usando:

**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