javascript - playgroundinc.com中的导航效果是如何实现的

Question

如果你去playgroundinc.com你会看到一个漂亮的网站。然后在顶部有一个始终存在的导航栏，即它似乎不会在每次单击链接时重新加载。即使每次点击链接都会一次又一次地重新加载，但它看起来好像不是。

查看源代码，它看起来就像 html 页面标题中的常规导航。我很好奇如何才能达到类似的效果。

Answer 1

您可以使用插件skrollr

https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js

转到上面的页面，复制显示的大代码，将其粘贴到文本编辑器中并将其另存为 scrollr.js。将此文件添加到您的网站文件夹中。

现在转到您的 index.html(我假设您这样调用它)并在您的正文底部添加此代码:

<script type="text/javascript" src="skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script>

现在你可以玩导航栏了:

<div id="nav" data-start="opacity:1;" data-10="opacity:0;">

现在，如果您向下滚动 4 像素，您的导航栏将不可见。