Both the left panel and main content should have individual scrolling abilities.
You can view a demonstration of this functionality here:
http://plnkr.co/edit/Le6hPWwMm0pu5Ukm2cYg?p=preview
Below is the CSS code required for this feature:
html {
overflow-y: scroll;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: Arial;
font-size: 18px;
position: fixed;
overflow-y: auto;
}
header {
background-color: #3b5998;
padding: 10px;
text-decoration: none;
position: fixed;
width: 100%;
z-index: 1;
-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}
#content {
background-color: #FFFFFF;
padding: 52px 10px 10px 10px;
position: relative;
width: auto;
height: 100%;
-webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
overflow-y: auto;
}
#hamburger {
/* Styles for hamburger menu */
}
#hamburger div {
/* More styles for hamburger menu */
}
nav {
/* Styling for the navigation panel */
}
The main content section should remain static while the left panel and main content can scroll independently.