fullpage.js教程（二）

作全屏滚动网页，实现滚动效果后，首先想到的就是网页右边的导航栏，要实现这个导航栏，fullpage.js插件自己就自带配置项，只要会使用就能够实现效果了。

先介绍几个api：

• anchors：定义锚连接，默认值为[]，有了锚连接，就能够快速的打开定位到某一页面，也是咱们实现导航栏的关键；
• lockAnchors：是否锁定锚连接，默认为false，若是设定为true，定义的锚连接，也就是anchors属性就没有效果了；
• menu：绑定菜单，设定相关属性与anchors的值相对应后，菜单能够控制滚动，默认为false；
• navigation：是否显示导航，默认为false，若是设置为true，会显示小圆点，做为导航；
• navigationPostion：导航小圆点的位置，能够设置为left或right；
• navigationTooltips：导航小圆点的tooltips的设置，默认为[]，注意按照顺序设置。

使用fullpage.js插件默认自带的导航栏： 

 1 <script>
 2 　　$(function(){  3 　　　　$('#gufeibai').fullpage({  4 　　　　　　anchors : ['page1','page2','page3','page4']，  5 　　　　　　navigation：true，  6 　　　　　　navigationPostion：right，  7 　　　　　　navigationTooltips：['page1','page2','page3','page4']  //设置它的提示
 8 　　　　});  9 　　}); 10 </script>

 

设置完成就能够查看效果了，若是不想用fullpage.js默认的样式效果，还能够自定义样式。

自定义导航栏

基本结构：

 1 <div id="gufeibai">
 2 　　<div class="section">第一屏</div>
 3 　　<div class="section">第二屏</div>
 4 　　<div class="section">第三屏</div>
 5 </div>
 6 <ul id="fp-nav">
 7 　　<li data-menuanchors='page1'><a href="#page1">1</a></li>
 8 　　<li data-menuanchors='page2'><a href="#page2">2</a></li>
 9 　　<li data-menuanchors='page3'><a href="#page3">3</a></li>
10 </ul>

实现效果:

1 <script>
2 　　$(function(){ 3 　　　　$('#gufeibai').fullpage({ 4 　　　　　　anchors : ['page1','page2','page3','page4']， 5 　　　　　　menu : '#fp-nav'
6 　　　　}); 7 　　}); 8 </script>