fullpage.js使用指南

近期的网站改版，须要采用全屏滑动的方式布局。因而就使用了fullpage插件。

由于fullpage是基于jquery，因此须要首先引入jquery，而后再引入fullpage.js。

$('#fullpage').fullpage({//调用fullpage元素 使用其方法设置参数

　menu: '#menu', //网站导航菜单

   anchors：['page1', 'page2', 'page3'],//为每屏板块命名的锚连接

   navigation: true,//是否显示导航按钮

   scrollingSpeed:900,//屏幕滚动花费的时间 毫秒

   fixedElements:'.header',//固定class为header的元素  这里为栏目菜单

   afterLoad：function(anchorLink,index){ //进入当前板块的函数        anchorLink为锚连接   index为索引值 从1开始

       if(index==1){

           $('#fp-nav ul li a span,.fp-slidesNav ul li a span').css('background-color','#fff');//把导航按钮背景色改为白色

        }

   },

  onLeave:function(index,nextIndex,direction){//滚动前的函数   //index为索引值  nextIndex为将要滑到到板块的索引值  direction 判断是往上滚动仍是往下 值是up或down

      if(nextIndex==4){  //若是要滑到第四屏板块   

　      $('.Service-wrap').addClass('animated');//为class为service-wrap的元素 添加class animated
　   }else{
　　   $('.Service-wrap').removeClass('animated');

       }

 

})

html结构方面须要注意的是：若是底部不须要完整的一屏显示  添加class fp-auto-height 就能够。//底部高度自定义