I have a classic website with a menu on the left side and content on the right. The menu is fairly long, but on some pages, the content is really long. So I wanted the menu to always be accessible to the left, even though you had scrolled way down. I’ve accomplished this in the following manner:
<body>
<div id="header" style="z-index:-1;">
<div id="menu" style="position:fixed;top:0px;height:2000px;overflow:hidden;">
Menu contents
</div>
</div>
<div id="main" style="margin-left:180px;margin-top:0px;z-index:100;">
Main page contents
</div>
</body>
and with additional styles
div#menu
{
float: left;
}
div#main
{
clear: both;
padding: 20px;
}
My problem is that for small viewports, the bottom of the menu is below the viewport, and it doesn’t scroll. I would like to have the menu scroll with the contents of the page, but only until it reaches the bottom of the menu. After that, the content should go on scrolling without the menu.
Would that be possible?
I haven’t tried anything yet, because I’m unsure what to try.