如何在playgroundinc.com中实现导航效果

时间:2014-12-25 20:16:34

标签: javascript html css web web-deployment

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

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

1 个答案:

答案 0 :(得分:-2)

您可以使用插件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,导航栏将不可见。