创建滚动到第二部分后显示的导航栏

Question

我需要创建类似that

的内容

我的理解是，无论窗口大小如何，背景都会调整大小以便完美贴合，一旦我向下滚动导航栏变得可见并且粘在顶部。

我相信我需要javascript（？），显然需要HTML和CSS。

任何提示，甚至是搜索内容都将受到高度赞赏。

Answer 1

只需谷歌“粘性导航”。这是我找到的codepen（使用jquery）并编辑过： https://codepen.io/anon/pen/NABAxd

这个想法很简单：你将一个处理程序附加到scroll事件，以检查用户是否向下滚动了一定数量。在此基础上，您应用或删除position:fixed到元素。您可以通过window.pageYOffset找到从顶部滚动的像素数量。

编辑： 您可以将height: 100vh设置为第一部分以覆盖整个浏览器窗口。我编辑了编码器。