配置项介绍

fullpage.jpg

十六、touchSensitivity:

在移动设备中滑动页面的敏感性，默认为5，是按百分比来衡量，最高为100，越大则越难滑动。

十七、continuousVertical:

页面是否循环滚动，默认为false，如果设置为true，则页面会循环滚动，而不是像loopTop或loopBottom那样出现跳动。
注：这个属性和loopTop、loopBottom不兼容，不能同时设置。

十八、animateAnchor:

锚链接是否可以控制滚动动画，默认为true。如果设置为false，则通过锚链接定位到某个页面显示不再有动画效果。

十九、recordHistory:

是否记录历史，默认为true，可以记录页面滚动的历史，通过浏览器的前进后退来导航。
注：如果设置了autoScrolling:false，那么这个配置也将被关闭，即设置为false。

二十、menu:

绑定菜单，设置的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false，可以设置为菜单的jquery选择器。示例代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 <title>Fullpage简单例子</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css"/>

 <style type="text/css">
    body{
        color:#fff;/*文字为白色*/
    }
    .slide{
      text-align: center;
      font-size: 20px;
    }
   #fullpageMenu{
      font-size:30px;
      position: fixed;
      top:0;
      z-index: 999;
   }
 </style>
</head>

<body>
<ul id="fullpageMenu">
    <li data-menuanchor="page1" class="active"><a href="#page1">1 section</a></li>
    <li data-menuanchor="page2"><a href="#page2">2 section</a></li>
    <li data-menuanchor="page3"><a href="#page3">3 section</a></li>
    <li data-menuanchor="page4"><a href="#page4">4 section</a></li>
</ul>

<div id="fullpage">
 <div class="section"><h1>这是第一屏</h1></div>
 <div class="section">
   <div class="slide">slide1</div>
   <div class="slide">slide2</div>
   <div class="slide">slide3</div>
   <div class="slide">slide4</div>
   <div class="slide">slide5</div>
   <div class="slide">slide6</div>
 </div>
 <div class="section"><h1>这是第三屏</h1></div>
 <div class="section"><h1>这是第四屏</h1></div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<!--******************配置项使用-->
<!--菜单的设置-->
<script>
    $(document).ready(function(){
      $('#fullpage').fullpage({
        sectionsColor:['green','orange','gray','red'],
        anchors:['page1','page2','page3','page4'],
        //css3:true,
        //loopTop:true,
        //loopBottom:true,
        //loopHorizontal:false
        //autoScrolling:false
        //scrollBar:true
        //paddingTop:'200px',
        //paddingBottom:'200px',
        //continuousVertical:true
        menu:'#fullpageMenu',
      });
    });
</script>

</body>
</html>

二十一、navigation:

是否显示导航，默认为false，如果设置为true，会显示小圆点作为导航。

（1）navigationPosition:

导航小圆点的位置，可以设置为left或right。

（2）navigationTooltips:

导航小圆点的tooltips设置，默认为[]，注意按照顺序设置。
示例代码如下：

<script>
    $(document).ready(function(){
      $('#fullpage').fullpage({
        sectionsColor:['green','orange','gray','red'],
      
         //导航小圆点的设置
         navigation:true,
         navigationPosition:'right',
         navigationTooltips:['page1','page2','page3','page4'],

         slidesNavigation:true,
         slidesNavPosition:'top',
      });
    });
</script>

二十二、scrollOverflow:

内容超过满屏后是否显示滚动条，默认为false。如果设置为true，则会显示滚动条，如果要滚动查看内容，还需要jquery.slimscroll插件的配合。slimscroll插件主要用于模拟传统的浏览器的滚动条。

FullPage.js自学笔记（三）