[英]How can I make responsive website containing stellar.js?
最近,我的网站正在使用stellar.js,我想找到一种方法,使左侧向上滚动,而右侧向相反方向移动。 但是,正确的元素在position:absolute中很好地显示。 红色背景位于我想要的右侧,而元素不是。 另外,右侧将包含许多单独的div。 最好的参考是国家LGBT博物馆遗址。 有什么建议吗? 提前致谢。
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;}
我不确定这是否是您要寻找的特定对象,但是在最近的Stellar.js响应项目中,我发现只需在其实例化中添加“ response:true”即可解决基本问题。
$.stellar({ responsive: true });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.