粘稠透明導航欄，使用視頻作爲背景

Question

我想在這個網站做一個導航欄一樣

http://spacetrain.com/

（爲了看你有沒有在任何鏈接的點擊效果菜單，所以你可以向下滾動。）

正如你所看到的，當你向下滾動導航欄時，它會使用視頻作爲背景粘貼到頂部填充。

我看到它使用bootstrap Scrollspy，但我不確定如何在我的網站中實現此操作。

是否可以用CSS做到這一點？

Answer 1

該鏈接上的導航欄不顯示爲透明，只是具有黑色背景。要讓div「黏着」並保持滾動頁面的頂部，您需要使用'position：fixed'。

#sticky-div { 
 
position: fixed; 
 
background: blue; 
 
color: white; 
 
width: 100%; 
 
top: 0; 
 
} 
 

 
#dummy-content { 
 
background: grey; 
 
padding: 300px 0; 
 
}

<div id="sticky-div"> 
 
    <p>I stay here</p> 
 
</div> 
 

 
<div id="dummy-content"> 
 
    <p>I don't stick</p> 
 
</div>