簡體   English   中英

如何制作包含stellar.js的響應式網站?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM