fixed position inside visible area of parent div - html

Question

I'm wondering if there is a way to fix an element inside a visible area of the div as I've described in the image below.
Here is an example of my problem (jsfiddle):
HTML:
<div id="header" ></div>
<div id="menu">
<a id="menu-collapse">collapse</a>
<div id="some-block"></div>
</div>
<div id="content"></div>
CSS:
#menu {
position: fixed;
top: 70px;
bottom: 0px;
left: 0;
width: 200px;
background-color: rgb(100, 134, 27);
overflow-x: auto;
}
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background-color: rgb(27, 48, 0);
min-width: 540px;
}
#menu-collapse{
}
#content {
position: fixed;
top: 70px;
right: 0px;
bottom: 0px;
left: 200px;
background-color: rgb(27, 118, 0);
}
#some-block{
position:absolute;
display:inline;
background-color: yellow;
width: 200px;
height: 2500px;
}
I need to have #menu-collapse in the middle of the visible area of #menu, while scrolling #menu.

Answer 1

Use position: fixed; in your CSS class definition. This will position the div relative to the browser window instead of the document itself, allowing it to maintain its position as you scroll.

Answer 2

There is now way to fix the element inside a div area if you use position:fixed; property then it will automatically fix it relatively to the browser.
Its a default feature.

Answer 3

On #menu-collapse, you need to add position: fixed; to get it to stay in the same position. And, you need top: 50%; in order to have it in the middle of #menu, and z-index: 1; in order for it to display on top of #some-block.
JSFiddle
HTML:
<div id="header" ></div>
<div id="menu">
<a id="menu-collapse">collapse</a>
<div id="some-block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae tortor fermentum, pellentesque lorem vitae, ullamcorper urna. Sed in imperdiet nisl, porta porta sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum euismod sapien a imperdiet placerat. Ut a maximus felis. Mauris porta purus id mi feugiat ultrices. Etiam mattis leo id hendrerit sagittis. Vivamus dapibus blandit ligula varius semper.</p>
<p>Ut nisl neque, efficitur non risus vitae, luctus cursus dui. Pellentesque aliquam varius cursus. Fusce lobortis, sapien at dictum porta, erat eros rhoncus metus, sit amet finibus libero quam nec nisl. Phasellus tempus ante vitae rutrum ultricies. Fusce sit amet hendrerit quam, egestas gravida risus. Donec eget tristique enim, ac lacinia nunc. Nam pulvinar, nunc et scelerisque ornare, est augue mollis sem, vel vulputate arcu mi et eros. Proin varius arcu vitae nisi porttitor, sit amet finibus eros congue. In dapibus tincidunt tortor. Sed at sem id tortor molestie finibus eget ut sem. In semper feugiat elementum. Morbi enim mauris, venenatis non felis ac, interdum euismod sapien. Praesent semper ante vel mauris auctor, ut commodo ipsum malesuada. Morbi hendrerit tortor sapien. Nulla in hendrerit dui, eu accumsan est</p>
</div>
</div>
<div id="content">
</div>
CSS:
#menu {
position: fixed;
top: 70px;
bottom: 0px;
left: 0;
width: 200px;
background-color: rgb(100, 134, 27);
overflow-x: auto;
}
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background-color: rgb(27, 48, 0);
min-width: 540px;
}
#menu-collapse{
position: fixed;
top: 50%;
z-index: 1;
background: red;
}
#content {
position: fixed;
top: 70px;
right: 0px;
bottom: 0px;
left: 200px;
background-color: rgb(27, 118, 0);
}
#some-block{
position:absolute;
display:inline;
background-color: yellow;
width: 200px;
height: 2500px;
}