I have the following code snippet with a JSFiddle link: jsfiddlel
HTML:
<div id="scroller">
<div id="container">
<div id="fixed">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</div>
</div>
CSS:
#scroller {
position: relative;
height: 400px;
width: 400px;
overflow: auto;
border: 1px solid;
background-color: #EEE;
}
#container {
height: 800px;
}
#fixed {
position: absolute;
height: 100px;
background-color: #FF0000;
top: 0;
left: 0;
width: 600px;
display: block;
}
I am trying to keep my div with the id "#fixed" fixed at the top within the "#scroller" div that has both vertical and horizontal scrollbars. Although I was able to achieve both scrollbars, I am facing difficulty in making the "#fixed" div stay at the top inside the "#scroller" div.
The contents within the "fixed" element should be scrollable using the horizontal scrollbar of the "#scroller".
Your assistance in resolving this issue would be greatly appreciated. Thank you in advance.