1.8 fullpage全屏滚动插件总结

FullPage.js 是一个简单而易于使用的jQuery插件，用来创建全屏滚动网站（也被称为单页网站）

1.1 主要功能

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

1.2兼容性

fullPage.js 支持 IE8+ 及其他现代浏览器。

1.3 Fullpage.js固定导航栏-实现定位导航栏

需求：当滚动翻页时，导航栏也自动定位到这一页的标签；当然点击标签时，也是滚动到那一页而不是直接跳转的。

1. 准备工作肯定是要先导入fullpage.js啦；
   官网：https://github.com/alvarotrigo/fullPage.js

注意：fullpage是基于jquery的，所以要记得导入jquery哦。

2. 导航栏结构

      
首页
      
作品
      
技能
      
联系方式

上面导航栏的结构是这样的，其中的data-menuanchor就是fullpage要求的，a便签的href属性也要相对应的值咯。

3. 滚动页的结构很简单，如下

      
1
      
2
      
3
      
4

4. 要配置fullpage,js

$(document).ready(function() {
$('#fullpage').fullpage({
      paddingTop: '50px',//是为了给固定导航栏腾出空间
      css3: true,
      //anchors,这个是依次给滚动页设置锚点，注意这里需要和导航栏里的li标签的data-menuanchor属性以及a的href属性对应。
      anchors:['firstPage', 'secondPage', 'thirdPage','fourthPage'],
      menu: '#myMenu'});
});

1.4 可选配置 参考地址

1.5 自定义Section高度

在需要自定义高度的DIV里面，只需要给Section添加.fp-auto-height类就可以实现自定义高度。