2 Divs之間的關係

Question

想象一下div1和div2。 div1的寬度爲100％，高度爲800px。 div2固定在瀏覽器的頂部，也有100％的寬度，可能是3000像素高。我試圖登陸，​​所以你看到div1，但是當你向下滾動時，div1滑過去，揭示div2和它的全部內容。這似乎很容易，但我無法弄清楚。

div1 { 
    width:100%; 
    height: 800px; 
    position: ???; 
    z-index:100; 
    background-color: white; 
} 


div2 { 
    width:100% 
    height: 3000px; 
    position: fixed; 
    background-color: black; 
} 

Answer 1

首先，您的示例代碼有一些缺陷，如錯誤的CSS選擇器（除非你創建了一個名爲「DIV1」等自定義標籤），缺少在DIV2 CSS規則（width:100%）結束;。您還需要將固定格置於左側/頂部0以將其放置在移動格子的後面。

要讓您的移動div移動，請添加一個bottom margin大小作爲它的height，它將滾動出視線/視口。

這種技術有時被稱爲視差滾動和here is a post showing more how/what one can do

.div1 { 
 
    width:100%; 
 
    height: 800px; 
 
    position: relative; 
 
    z-index:100; 
 
    background-color: white; 
 
    margin-bottom: 800px; 
 
} 
 

 

 
.div2 { 
 
top: 0; 
 
left:0; 
 
width:100%; 
 
height: 3000px; 
 
position: fixed; 
 
background-color: black; 
 
}

<div class="div1"></div> 
 
<div class="div2"></div>