My goal is to have a fixed background page while allowing the sidebar to scroll independently. Both elements are too large for the screen, so I want the page to scroll normally until the navbar overflows in height and becomes scrollable. Check out the example here:
https://jsfiddle.net/tpL92b01/2/
The grey div should be able to scroll.
This demo does not involve the typical show/hide functionality of the sidebar.
body, p, ul {
margin: 0;
padding: 0;
overflow: hidden;
}
p{
padding: 30px;
text-align: center;
border: 1px solid blue;
}
.main-content {
background-color: lightblue;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 200px;
}
.sidebar ul {
background-color: lightgrey;
}
.sidebar li {
padding: 15px;
}<html>
<body>
<div class="main-content">
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</div>
<div class="sidebar">
<ul>
<li>Menu item1</li>
<li>Menu item2</li>
<li>Menu item3</li>
<li>Menu item4</li>
<li>Menu item5</li>
<li>Menu item6</li>
<li>Menu item7</li>
<li>Menu item8</li>
<li>Menu item9</li>
</ul>
</div>
</body>
</html>