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哦。

  1. 导航栏结构

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

  1. 滚动页的结构很简单,如下
1
2
3
4
  1. 要配置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类就可以实现自定义高度。

你可能感兴趣的:(1.8 fullpage全屏滚动插件总结)