如何在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;">

现在，如果你向下滚动4px，你的导航栏将是不可见的。