Two divs scroll independently
I need some help to these two <div>
( #side-nav
and #content-wrapper
) scrolled independently
HTML:
<div id="wrapper">
<div id="top-nav">
Top nav
</div>
<div id="side-nav">
<ul>
<li>Thing</li>
<li>Thing</li>
</ul>
</div>
<div id="content-wrapper">
<!-- Ton of conent here -->
</div>
</div>
CSS
#wrapper {
width: 100%;
background-color: #fff;
}
#top-nav {
position: fixed;
top: 0;
height: 60px;
width: 100%;
background-color: green;
}
#side-nav {
position: fixed;
width: 250px;
height:100vh;
overflow-y: scroll;
background-color: red;
}
#content-wrapper {
margin: 60px 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
background-color: blue;
}
now if I scroll #side-nav
to the end or top #content-wrapper
will scroll too. #side-nav
should remain full page and fixed even if it doesn't exist.
I quickly made a handle here:
http://codepen.io/blizqery/pen/QbZzRN
Thank!
source to share
Check it out: http://codepen.io/anon/pen/xGyMjM
You need to set the height to the content wrapper and also set the left, right and top.
#side-nav {
position: fixed;
width: 250px;
height:100vh;
left: 0;
right: 0;
overflow-y: scroll;
background-color: red;
top: 60px;
}
#content-wrapper {
margin: 60px 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
position: fixed;
left: 0;
top: 0;
height:100vh;
background-color: blue;
}
source to share
I believe this works for your problem
body{
margin:0px;
}
#top-nav {
position: fixed;
top: 0;
height: 10vh;
width: 100%;
background-color: green;
}
#wrapper {
width: 100%;
background-color: #fff;
}
#side-nav {
float:left;
width: 250px;
height: 90vh;
overflow-y: scroll;
background-color: red;
}
#content-wrapper {
margin: 10vh 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
background-color: blue;
height:90vh;
}
source to share