fullpage API（配置项）

<script>

$(document).ready(function(){

$('#fullpage').fullpage({

sectionsColor['#FFF','#F00','#FHH','#FF0'],

controlArrows:false

});

});

</script>

controlArrows:false;(取消箭头设置为滑动 适用于手机页面 qq chrome可能不合适)

vertrialCenter

设置每个页面的内容是否居中

默认为true

resize

设置字体是否随着窗口的缩放而缩放

默认为false

scrollingSpeed

设置页面的滚动速度 默认为700ms

scrollingSpeed:1000

anchors

设置锚链接，默认值为[],有了锚链接可以定位到页面的位置

定义锚链接的时候，值不要和页面任意的Id和name相同

anchors:['page1','page2','page3','page4']  page1 page2就是锚链接

在<div id="section" active> 设置跳到这个锚链接

lockanchors

是否锁定锚链接 默认为false

设置为true时 当页面滑动时浏览器上地址 锚链接不变

easing

设置页面section滑动方式 默认为easeInOutCubic

如果修改需要引入jquery.easings或者 jquery ui插件（差异较小）

css3

是否使用css3 transforms来实现滚动效果，默认为true

提高支持css浏览器的效果

如果不支持使用jquery实现滚动效果

loopTop

设置滚动到顶部时是否回滚到底部 默认为false

loopBottom

设置滚动到底部时是否回滚到顶部 默认为false

ioopHorizontal

设置横向幻灯片是否循环滚动 默认为true

autoScrolling

设置是否使用插件的滚动方式默认为ture 否则使用浏览器的滚动条的方式

scrollBar

设置滚动条 默认为false 否则出现浏览器滚动条 但还是页面滚动但滚动条的方式也起作用

paddingTop paddingBottom

设置每一个section顶部和底部的padding

一般我们设置顶部或底部固定的菜单、导航、元素等，可以使用

fixedElements

默认为null 表示页面滚动时 fixedElement设置的元素固定不变的（值是一个jquery的选择器）

#header{
top:0;
position:fixed;
right:200px;
font-size:30px;
}

fixedElements: '#header'

keyboardScrolling

是否使用键盘方向键导航 默认为true

touchSensitivity

在移动页面中滑动页面的敏感性 默认为5

用百分比衡量 默认100 越大越难滑动

continuousVertial

设置页面是否顺滑循环滚动 不像loopTop有个跳动过程

animateAnchor

锚链接是否可以控制滚动动画 默认true 否则锚链接定位到某个页面不会有动画效果

recordHistory

是否记录历史 默认为true 可以记录浏览器滚动的历史 通过前进后退来导航

如果设置autoScrolling 这个配置将会关闭设置为flase

menu

绑定菜单 菜单可以控制滚动 设置的属性与anchors值对应

默认为flase 可以设置为jquery的选择器

#fullpagemenu{
position:fixed;
top:0;
z-index:999;
}
#fullpagemenu li{
float:left;
left:auto;
}

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

menu:'#fullpage'

navigation

是否显示导航条默认为false

设置为true时 会显示小圆点作为导航

navigationPositin

导航小圆点的位置 left 或者right

navigationTooltips

导航小圆点tooltips设置默认为[] 注意按顺序设置

showActiveTooltip

是否显示当前页面导航的tooltip信息 默认为flase

滑动页面右边直接显示 不用鼠标浮动上去

slidesNavigation

是否显示横向幻灯片的导航 默认为flase

slidesNavPosition

横向幻灯片导航的位置 默认为bottom 可以设置为top

scrollOverflow

当内容比较多需要滚动条显示时使用 默认为false

如果要查看滚动内容 还需要引入jquery.slimscroll插件

scrollOverflow:true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.7/jquery.slimscroll.js">

</script>

sectionSelector

section的选择器 默认为.section

例如 修改

<div id="fullpage">
<div class="section ">为

<div id="fullpage">
<div class="page ">

设置

sectionSelector: '.page'

slideSelector

slide的选择器 默认为.slide

具体参考fullpage官方文档   https://github.com/alvarotrigo/fullPage.js#options