如何制作包含stellar.js的响应式网站?

时间:2013-11-30 01:17:21

标签: css parallax stellar.js

最近,我的网站正在使用stellar.js,我想找到一种方法让左侧向上滚动而右侧向右侧移动。但是,正确的元素在位置上显示良好:绝对。红色背景位于右侧,这是我想要的,但元素不是。此外,右侧将包含许多单独的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;}

1 个答案:

答案 0 :(得分:1)

我不确定这是否是您特别想要的,但在最近与Stellar.js的响应项目中,我发现只需在其实例化中添加“responsive:true”就可以解决基本问题。

$.stellar({ responsive: true });