滚动的粘性透明导航栏，使用视频作为背景

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>