recently, my site is using stellar.js and I want to find a way to make the left side is scrolling up and the right side going opposite. However, the right element is display nicely in position:absolute. The red background locates on the right side which is what I want, but the element is not. Also, the right side will contains many individual divs. The best reference is National LGBT museum site. Any suggestion? Thanks in advance.
HTML
<div id="container2">
<div id="wrap1">
<div data-stellar-ratio="1">Hi</div>
</div>
<div id="wrap2">
<div>
<div data-stellar-ratio="-1">hi</div>
<div data-stellar-ratio="-1">hi</div>
</div>
</div>
</div>
CSS:
#container2
{overflow:auto;
height:4480px;
width:100%;
float:left;}
#wrap1
{height: 3000px;
overflow:hidden;
float:left;
width:50%;
background-color: black;}
#wrap1 div {
width: 10px;
height: 800px;
margin-top:0px;
background-color: blue;}
#wrap2 {
overflow:auto;
height: 3000px;
overflow:hidden;
display: block;
float:left;
width:50%;
background-color: red;}
#wrap2 div {
position:absolute;
float:left;
left:50%;
width: 10%;
height: 640px;
background-color:green;
z-index: 999;
border:5px solid black;}
I'm not sure if this is specifically what you're specifically looking for, but during a recent responsive project with Stellar.js, I found that simply adding "responsive: true" to its instantiation fixed the basic issue.