全屏滚动插件----fullPage的使用

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站

功能：

支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

兼容性：

支持jquery 1.7+，浏览器支持IE8+，Chrome，Firefox，Opera，Safari。

使用方法

引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 -->
<script src="js/jquery.easings.min.js"></script>
<!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 -->
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

HTML文件

<div id="fullpage" class="fullpage">
    <div class="section">111</div>
    <div class="section">2222</div>
    <div class="section">3333</div>
    <div class="section">4444</div>
    <div class="section">5555</div>
    <div class="section">6666</div>
</div>

每一屏是一个section，默认显示第一屏，要想指定显示那一屏，可以在对应的section加上class=“active”；如：
<div class='section active'>第二屏</div>
接着，要想在一屏里面在内嵌一个屏，也就是一屏里面再有好几屏在显示，可以在section中添加slide，如：

<div id="fullpage" class="fullpage">
    <div class="section">111</div>
    <div class="section">
        <div class="slide">第二屏里面的第一屏</div>
        <div class="slide">第二屏里面的第二屏</div>
        <div class="slide">第二屏里面的第三屏</div>
        <div class="slide">第二屏里面的第四屏</div>
    </div>
    <div class="section">3333</div>
    <div class="section">4444</div>
    <div class="section">5555</div>
    <div class="section">6666</div>
</div>

Javascript调用

$(function(){
    $('#fullpage').fullpage(
       // 一些配置选项
     );
})

导航菜单的使用

页面滚动时，导航栏也自动定位到导航栏对应的标签；当点击标签，自动滚动到对应的页面

顶部导航菜单

导航栏结构：
<ul id="menu">
   <li data-menuanchor="firstPage" class="menuList"><a href="#firstPage">首页</a></li>
   <li data-menuanchor="secondPage" class="menuList"><a href="#secondPage">作品</a></li>
   <li data-menuanchor="thirdPage" class="menuList"><a href="#thirdPage">技能</a></li>
   <li data-menuanchor="fourthPage"class="menuList"><a href="#fourthPage">联系方式</a></li>
</ul>
配置顶部导航栏：(写在fullpage外面，footer写在fullpage里面)
$("#fullpage").fullpage({
     menu:true,  // 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
     anchors:["firstPage","secondPage","thirdPage","fourthPage"], // 定义锚链接 导航栏显示的标签
    
 })

data-menuanchor是fullpage要求的，连接的herf属性与前面data-menuanchor的值一一对应，配置里面的anchors与data-menuanchor一样，类似与a连接的锚点功能；最好是给菜单设置一个ID名，因为是唯一的，其实设置class名也是一样的。

侧边导航菜单

需要在js里面进行配置
$("#fullpage").fullpage({
     navigation:true,  // 是否显示项目导航
      navigationPosition:"right", // 项目导航的位置，可选 left 或 right
     navigationTooltips:["简介","项目","技能","联系方式"], //项目导航的 tip
 })

由于默认的侧边栏导航栏的颜色是白色，其有一个配置颜色的属性，但是好像不起作用，故待解决：navigationColor

自定义`section`的高度

也就是footer的定义

实现自定义高度的section，在需要的section里面添加.fp-auto-height类，就可以实现自定义高度，不算在section的高度里面。当你直接在section里面添加.fp-auto-height类时，通过对齐添加高度，会发现高度设置没有成功。查阅网上的资料，说是在其section里面在添加一个div元素，通过设置div的样式，来控制高度：

<div class="section fp-auto-height">
        <footer>
            我是页脚
        </footer>
 </div>
.fp-auto-height footer{
    height:400px;    // 成功
}

页脚和上一屏出现留白的问题

顶部导航覆盖页面内容的问题：paddingTop

由于设置了paddingTop，可以使得一屏之间的内容与顶部导航栏有距离，但是也会产生页脚和上一屏出现留白的问题；对于这个问题，首先会想到通过单独设置其最后一屏的样式，去掉其paddingTop，结果发现没有作用，再想是否是重叠样式的等级不够，使用style样式也无济于事。

故想，fullpage为其section添加paddingTop是否使用的js去修改添加，尝试使用js去覆盖其原本的样式，单独给其添加paddingTop：

// 解决导航底部覆盖页面内容的问题
for(var i=0;i<5;i++){
   $(".section").eq(i),css({
        paddingTop:"100px",
   })
}

功能：

兼容性：

使用方法

导航菜单的使用

自定义section的高度

页脚和上一屏出现留白的问题

自定义`section`的高度