粘稠透明导航栏，使用视频作为背景

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>