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 就能夠。//底部高度自定義