學(xué)習(xí) jQuery-fullPage.js 插件已經(jīng)兩天兆旬，參照網(wǎng)上的案例仿造了一個(gè)“魅族Note2官網(wǎng)”網(wǎng)頁，中間出了很多問題隧出，不過最終還是被我做出來了踏志。主要問題有包括：

• 內(nèi)容超出section導(dǎo)致無法全屏
• 沒有更新到最新的fullpage.js導(dǎo)致fp-auto-height不能使section高度自適應(yīng)（網(wǎng)站header和footer）
• 沒有做不同分辨率下的樣式適配（即@media），使網(wǎng)頁在不同大小的屏幕上顯示效果相差較大胀瞪。

最后针余，使用onLeave()寫了一個(gè)控制二級(jí)網(wǎng)站頂部二級(jí)導(dǎo)航條滑動(dòng)顯示/隱藏的js動(dòng)畫饲鄙。效果展示

簡(jiǎn)介

jQuery-fullPage.js 是一個(gè)用于實(shí)現(xiàn)全屏滾動(dòng)的jQuery插件，很多高端大氣的網(wǎng)頁都是使用這個(gè)插件完成的圆雁。

插件的主要功能：

• 支持鼠標(biāo)滾動(dòng)
• 支持前進(jìn)后退和鍵盤控制
• 多個(gè)回調(diào)函數(shù)
• 支持手機(jī)忍级、平板觸摸事件
• 支持 CSS3 動(dòng)畫
• 支持窗口縮放
• 窗口縮放時(shí)自動(dòng)調(diào)整
• 可設(shè)置滾動(dòng)寬度伪朽、背景顏色烈涮、滾動(dòng)速度朴肺、循環(huán)選項(xiàng)坚洽、回調(diào)、文本對(duì)齊方式等等

兼容性

• 瀏覽器：fullPage.js 支持 IE8+ 及其他現(xiàn)代瀏覽器
• jQuery版本：兼容 jQuery 1.7+ 版本

使用方法

引入文件

• 該插件需要jQuery庫支持酪术，所以需要先引入jQuery庫，然后再引入fullPage.js庫

• 另外別忘了在head標(biāo)簽中引入 jquery.fullPage.css樣式文件

• 注釋的代碼屬于進(jìn)階的知識(shí)橡疼，一般情況下使用不到欣除，大家可根據(jù)需要自行引入

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>

<!-- jquery.easings.min.js 用于 easing 參數(shù)历帚，也可以使用完整的 jQuery UI 代替挽牢，如果不需要設(shè)置 easing 參數(shù)禽拔，可去掉改文件 -->
<!-- <script src="js/jquery.easings.min.js"></script> -->

<!-- 如果 scrollOverflow 設(shè)置為 true睹栖，則需要引入 jquery.slimscroll.min.js，一般情況下不需要 -->
<!-- <script src="js/jquery.slimscroll.min.js"></script> -->

<script src="js/jquery.fullPage.js"></script>

html代碼

<div id="fullgage">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>

每個(gè) section 代表一屏踪旷，默認(rèn)顯示“第一屏”搪锣，如果要指定加載頁面時(shí)顯示的“屏幕”构舟，可以在對(duì)應(yīng)的 section 加上 class=”active”狗超，如：

<div class="section active">

同時(shí)努咐，可以在 section 內(nèi)加入 slide渗稍，如：

<div id="fullgage">
    <div class="section page1">第一屏</div>
    <div class="section page2">第二屏</div>
    <div class="section page3">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section page4">第四屏</div>
</div>

JavaScript代碼

$(function(){
    var $mlNav = $('.ml-nav');
    $('#fullpage').fullpage({
        navigation: true, //右側(cè)小點(diǎn)點(diǎn)導(dǎo)航
        anchors:["page1","page2","page3","page4"], //錨文本竿屹，使瀏覽器的前進(jìn)后退鍵生效拱燃，地址欄鏈接可以直接定位到內(nèi)頁（section）
    });
});

以上是最簡(jiǎn)單的fullpage初始化代碼，你也可以加入更多的選項(xiàng)哮缺，例如：

$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: false,
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',

//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,

//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,

//Design
controlArrows: true,
verticalCentered: true,
resize : false,
sectionsColor : ['#ccc', '#fff'],
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,

//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',

//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});

fullPage.js插件配置參數(shù)說明

1、配置參數(shù)茎匠，可以在fullpage的方法內(nèi)使用诵冒，例如前面「 JavaScript代碼 」中的navigation:truenavigation: true

參數(shù)詳細(xì)說明：

controlArrows

默認(rèn)值：true流礁，決定是否使用控制箭頭向左或向右移動(dòng)幻燈片神帅。

verticalCentered

默認(rèn)值：true，決定是否初始化后霎桅，是否垂直居中網(wǎng)頁的內(nèi)容滔驶，如果你想自定義元素的位置揭糕，那么你可以設(shè)置為false揪漩，在插件初始化后調(diào)用afterrender回調(diào)函數(shù)加載其它的腳本庫設(shè)置你網(wǎng)頁的內(nèi)容奄容。

resize

默認(rèn)值：true嫩海，是否在窗口改變大小后审葬，自動(dòng)調(diào)整網(wǎng)頁中字體的大小涣觉。

scrollingSpeed

默認(rèn)值：700官册，每個(gè)屏幕滾動(dòng)動(dòng)畫執(zhí)行的時(shí)間鸦难，時(shí)間的單位為毫秒（ms）合蔽。

sectionsColor

默認(rèn)值：none拴事，定義每個(gè)section的CSS背景演示，例如下面的代碼：

$('#fullpage').fullpage({
  sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

如果設(shè)置的參數(shù)不對(duì)稱牲证，比如屏幕個(gè)數(shù)多余設(shè)置的顏色個(gè)數(shù)从隆，那么多余的屏幕默認(rèn)沒有背景顏色寿烟，如果屏幕個(gè)數(shù)少于設(shè)置的顏色個(gè)數(shù)筛武，那么多余的顏色將不顯示徘六。

anchors

默認(rèn)值：[]，定義導(dǎo)航的錨文本信息例如（#example）竿音，每個(gè)導(dǎo)航文本之前用英文逗號(hào)（,）分隔，快速導(dǎo)航的錨文本URL也是使用的這個(gè)文本宽气，瀏覽器通過此錨文本鏈接可以支持前進(jìn)和后退按鈕功能萄涯。

此選項(xiàng)的設(shè)置還可以作為用戶的書簽，當(dāng)用戶打開帶有錨文本的URL時(shí)袄琳，F(xiàn)ullpage可以自動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)的section屏幕或者slide幻燈片位置唆樊。

注意，如果你使用了此選項(xiàng)片效，那么網(wǎng)頁中不能有相同的ID昙读，一來Fullpage插件無法準(zhǔn)確的定位到section屏幕或者slide幻燈片位置蛮浑，二來這也有悖網(wǎng)頁中CSS的編寫規(guī)范。

lockAnchors

默認(rèn)值：false蕴掏，確定是否在URL中的錨點(diǎn)將在插件有任何影響囚似。你仍然可以使用錨內(nèi)部自己的函數(shù)和回調(diào)徐伐，但他們不會(huì)有任何作用办素，在網(wǎng)站的滾動(dòng)勺三。如果你想把fullpage.js在URL使用錨其他插件吗坚。

注意，這樣的設(shè)置有助于了解anchors選項(xiàng)在側(cè)邊欄菜單的對(duì)應(yīng)關(guān)系牡彻，與類的元素的值缎除。通過.section它在標(biāo)記的位置器罐。

easing

默認(rèn)值：easeInOutCubic，定義了用于垂直和水平滾動(dòng)的過渡效果衰倦，它要求文件vendors/jquery.easings.min.js或者jQuery UI插件，具體的動(dòng)畫效果你可以參考 easings插件介紹 驻襟，你也可以使用其它的動(dòng)畫插件庫。

easingcss3

默認(rèn)值：ease豌习，定義在滾動(dòng)屏幕中使用css3:true設(shè)置的過度效果，你可以使用 CSS3 transition-timing-function 屬性 自定義多個(gè)動(dòng)畫效果栋艳，例如：linear、ease-out旬昭、……，或者使用cubic-bezier方法創(chuàng)建自定義的動(dòng)畫效果骤坐，你可能想要使用 Matthew Lein CSS Easing Animation Tool 創(chuàng)建這個(gè)蕾久。

loopTop

默認(rèn)值：false，定義屏幕滾動(dòng)到第一個(gè)后盹愚，是否循序滾動(dòng)到最后一個(gè)。

loopBottom

默認(rèn)值：false愈腾，定義屏幕滾動(dòng)到最后一個(gè)后，是否循環(huán)滾動(dòng)到第一個(gè)礁鲁。

loopHorizontal

默認(rèn)值：true冗美，定義水平的幻燈片是否循環(huán)切換节预。

css3

默認(rèn)值：true，確定是否使用JavaScript和CSS3轉(zhuǎn)換滾動(dòng)在切片和幻燈片糠赦。加快平板電腦和移動(dòng)設(shè)備的瀏覽器支持CSS3的運(yùn)動(dòng)有益淌山。如果此選項(xiàng)設(shè)置為true，瀏覽器不支持CSS3退渗，jQuery回調(diào)函數(shù)將被替代。

autoScrolling

默認(rèn)值：true，定義屏幕是否自動(dòng)滾動(dòng)体斩，還是需要用戶觸發(fā)事件滾動(dòng)，它也影響了部分適合在平板電腦和手機(jī)瀏覽器/設(shè)備窗口蹬敲。

fitToSection

默認(rèn)值：true，設(shè)置是否自適應(yīng)整個(gè)窗口的空間，以某個(gè)section的內(nèi)容為分界線阱扬，設(shè)置為true時(shí)，某個(gè)的section將填充到整個(gè)頁面窃蹋，否者用戶可以停留在網(wǎng)頁的任何位置碎乃。

scrollBar

默認(rèn)值：false，定義是否使用瀏覽器默認(rèn)的滾動(dòng)條，如果使用瀏覽器默認(rèn)的滾動(dòng)條及穗，autoScrolling配置任然生效，用戶也可以自由滾動(dòng)的網(wǎng)站與滾動(dòng)條和fullpage.js將適合的部分在屏幕滾動(dòng)時(shí)完成绵载。

paddingTop

默認(rèn)值：0埂陆，定義每個(gè)section固定的頭部留白，例如設(shè)置paddingBottom: ’10px’娃豹、 paddingBottom: ’10em’、……懂版，在使用固定表頭的情況下有用的鹃栽。

fixedElements

默認(rèn)值：null，定義的某個(gè)元素是否在網(wǎng)頁的固定位置躯畴，元素將被關(guān)閉的插件是必要的時(shí)候民鼓，使用CSS3的選項(xiàng)保持滾動(dòng)結(jié)構(gòu)固定。它需要對(duì)這些元素的jQuery選擇器字符串蓬抄。例如：fixedElements: ‘#element1, .element2’丰嘉。

normalScrollElements

默認(rèn)值：null，如果你想避免自動(dòng)滾動(dòng)嚷缭，滾動(dòng)時(shí)的一些元素供嚎，這是你需要使用的選項(xiàng)。（有用的地圖峭状，滾動(dòng)div等）需要對(duì)這些元素的jQuery選擇器字符串。例如：normalScrollElements: ‘#element1, .element2’逼争。

<span id="index">normalScrollElementTouchThreshold</span>

默認(rèn)值：5优床，定義了一個(gè)數(shù)字，測(cè)試HTML標(biāo)簽樹的機(jī)構(gòu)誓焦，是否在在移動(dòng)設(shè)備上支持觸摸事件胆敞。

keyboardScrolling

默認(rèn)值：true着帽，定義是否可以通過鍵盤箭頭事件控制section的滾動(dòng)。

touchSensitivity

默認(rèn)值：5移层，定義了瀏覽器窗口的寬度/高度的百分比仍翰，多遠(yuǎn)的觸摸滑動(dòng)可以跳轉(zhuǎn)到下一個(gè)section / slide。

continuousVertical

默認(rèn)值：false观话，定義向下滾動(dòng)到最后一節(jié)是否應(yīng)該向下滾動(dòng)到第一個(gè)予借，如果向上滾動(dòng)的第一部分應(yīng)該滾動(dòng)到最后一個(gè)。不兼容loopTop和loopBottom選項(xiàng)频蛔。

animateAnchor

默認(rèn)值：true灵迫，定義當(dāng)網(wǎng)頁的URL中有錨文本的時(shí)候，是否幫用戶定位到對(duì)應(yīng)的section或者slide晦溪。

recordHistory

默認(rèn)值：true瀑粥，定義是否將網(wǎng)頁滾動(dòng)的的狀態(tài)紀(jì)錄到瀏覽器的歷史記錄中。

當(dāng)設(shè)置為true時(shí)三圆，每一個(gè)section/slide滾動(dòng)的狀態(tài)將紀(jì)錄到瀏覽器的歷史紀(jì)錄中狞换，這樣的設(shè)置有利于用戶方便回退到剛才瀏覽的內(nèi)容。
當(dāng)設(shè)置為false時(shí)候舟肉，用戶的瀏覽路徑不會(huì)記錄到瀏覽器的歷史紀(jì)錄中修噪，如果要取消這個(gè)選項(xiàng)可以使用autoScrolling:false。

menu

默認(rèn)值：false度气，一個(gè)選擇器可以用來指定要與滾動(dòng)互動(dòng)的導(dǎo)航菜單割按，有點(diǎn)類似與Bootstrap的滾動(dòng)監(jiān)聽。這樣到滾動(dòng)到某個(gè)section時(shí)磷籍，對(duì)應(yīng)的菜單會(huì)被自動(dòng)添加active類适荣。

注意，這個(gè)選項(xiàng)不會(huì)自動(dòng)生成一個(gè)導(dǎo)航菜單院领，僅僅是給指定的菜單中當(dāng)前菜單項(xiàng)添加一個(gè)active活動(dòng)類弛矛。

為了讓自定義導(dǎo)航菜單和屏幕section互動(dòng)，需要給菜單添加一個(gè)HTML5的自定義屬性（data-menuanchor）比然，需要和錨文本設(shè)置相同的內(nèi)容丈氓，例如下面的示例代碼：

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

注意：注意這個(gè)自定義的菜單代碼應(yīng)該放置到插件設(shè)置的內(nèi)容外面，避免因?yàn)榕虐娌患嫒輪栴}可以使用css3:true强法，否則將被附加到body的插件本身万俗。

navigation

默認(rèn)值：false，如果設(shè)置為true饮怯，那他將會(huì)顯示一個(gè)小圓圈組成的快速導(dǎo)航欄闰歪。

navigationPosition

默認(rèn)值：none，結(jié)合參數(shù)navigation一起使用蓖墅，用于設(shè)置navigation定義的菜單顯示的位置库倘，可以設(shè)置為left/right临扮。

navigationTooltips

默認(rèn)值：[]，定義當(dāng)navigation設(shè)置為true的時(shí)候教翩，鼠標(biāo)移動(dòng)到快速導(dǎo)航上面的提示文本杆勇，每個(gè)屬性中間用英文半角逗號(hào)（,）隔開。

showActiveTooltip

默認(rèn)值：false饱亿，設(shè)置是否自動(dòng)顯示navigationTooltips中設(shè)置的工具提示文本蚜退。

slidesNavigation

默認(rèn)值：false，使用方法同navigation路捧，不過這個(gè)參數(shù)設(shè)置的導(dǎo)航顯示位置不同关霸，而且這個(gè)是用戶設(shè)置幻燈片的。

slidesNavPosition

默認(rèn)值：bottom杰扫，定義slidesNavigation中設(shè)置的導(dǎo)航菜單顯示的位置队寇，可選的設(shè)置值為top/bottom，你可能要修改CSS樣式確定的距離從頂部或底部以及任何其他風(fēng)格如顏色章姓。

scrollOverflow

默認(rèn)值：false佳遣，設(shè)置當(dāng)內(nèi)容超過屏幕的高度的時(shí)候，是否裁切多余的內(nèi)容凡伊。

當(dāng)設(shè)置為true時(shí)零渐，你的內(nèi)容將會(huì)被自動(dòng)裁切，可以考慮當(dāng)afterRender回調(diào)函數(shù)調(diào)用的時(shí)候系忙，處理你的內(nèi)容的多少或者使用其它的插件庫合理的處理多余的內(nèi)容诵盼。
當(dāng)設(shè)置為false時(shí)，插件不會(huì)自動(dòng)裁切多余的內(nèi)容银还，但是剩下沒有顯示的內(nèi)容任然不能顯示风宁，此時(shí)，你可以使用 jquery.slimscroll.min插件來自定義滾動(dòng)事件蛹疯，如果要使用這個(gè)插件戒财，應(yīng)該在Fullpage插件之前引入，例如下面的代碼：

<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

sectionSelector

默認(rèn)值：.section捺弦，定義用于選擇全屏滾動(dòng)內(nèi)容的jQuery選擇器饮寞。它可能需要改變，有時(shí)為了避免與其他插件使用相同的選擇器作為整版的問題列吼。

slideSelector

默認(rèn)值：.slide幽崩，定義用于插件幻燈片jQuery選擇器。它可能需要改變寞钥，有時(shí)為了避免與其他插件使用相同的選擇器fullpage.js問題歉铝。

responsiveWidth

默認(rèn)值：0， A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s width is less than 900 the plugin will scroll like a normal site.

responsiveHeight

默認(rèn)值：0凑耻， A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s height is less than 900 the plugin will scroll like a normal site.

fullPage.js插件方法函數(shù)

插件方法使用說明

moveSectionUp()

設(shè)置section向上滾動(dòng)

$.fn.fullpage.moveSectionUp();

moveSectionDown()

設(shè)置section向下滾動(dòng)

$.fn.fullpage.moveSectionDown();

moveTo(section, slide)

設(shè)置屏幕滾動(dòng)到某個(gè)section或者slide，兩個(gè)參數(shù)都是某個(gè)內(nèi)容塊的索引值或者是錨文本香浩，默認(rèn)情況下slide的索引被設(shè)置為0类缤。

/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.moveTo('firstSlide', 2);
 
//Scrolling to the 3rd section in the site
$.fn.fullpage.moveTo(3, 0);
 
//Which is the same as
$.fn.fullpage.moveTo(3);

silentMoveTo(section, slide)

這個(gè)函數(shù)的用法和MoveTo方法完全一樣，只是MoveTo在切換的時(shí)候有動(dòng)畫效果邻吭，而silentMoveTo方法在切換的時(shí)候沒有動(dòng)畫效果餐弱，直接跳轉(zhuǎn)到對(duì)應(yīng)的section中。

/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.silentMoveTo('firstSlide', 2);

moveSlideRight()

設(shè)置幻燈片向右滑動(dòng)囱晴，將下一個(gè)幻燈片顯示在當(dāng)前的屏幕中膏蚓。

$.fn.fullpage.moveSlideRight();

moveSlideLeft()

設(shè)置幻燈片向左滑動(dòng)，將上一個(gè)幻燈片顯示在當(dāng)前的屏幕中畸写。

$.fn.fullpage.moveSlideLeft();

setAutoScrolling(boolean)

可以實(shí)時(shí)的控制頁面滾動(dòng)的方式驮瞧，可選的參數(shù)false/true。

• 如果參數(shù)被設(shè)置為true枯芬，所有的section將自動(dòng)滾動(dòng)论笔。
• 如果參數(shù)被設(shè)置為false，所有的section將不會(huì)自動(dòng)滾動(dòng)千所，需要用戶手動(dòng)或者使用瀏覽器的滑條滾動(dòng)網(wǎng)頁狂魔。

注意，scrollOverflow參數(shù)如果設(shè)置為true淫痰，它可能很難滾動(dòng)鼠標(biāo)滾輪或觸摸板當(dāng)部分滾動(dòng).

$.fn.fullpage.setAutoScrolling(false);

setFitToSection(boolean)

該函數(shù)設(shè)置選項(xiàng)fitToSection確定是否自適應(yīng)section在屏幕上最楷。

$.fn.fullpage.setFitToSection(false);

setLockAnchors(boolean)

設(shè)置選項(xiàng)lockAnchors確定將錨文本鎖定到URL中。

$.fn.fullpage.setLockAnchors(false);

setAllowScrolling(boolean, [directions])

添加或者禁止Fullpage自動(dòng)綁定的鼠標(biāo)滑輪和移動(dòng)觸摸事件待错，不過用戶任然可以通過鍵盤和點(diǎn)擊快速導(dǎo)航的方式切換section/slide籽孙。要取消鍵盤事件你應(yīng)該使用setKeyboardScrolling方法。

• directions朗鸠，可選參數(shù)蚯撩，可以設(shè)置的值：all, up, down, left, right或者設(shè)置組合的參數(shù)，例如down, right烛占，他設(shè)置的兩個(gè)方向上將禁止或者激活滾動(dòng)胎挎。

//disabling scrolling
`$.fn.fullpage.setAllowScrolling(false);` 

//disabling scrolling down
$.fn.fullpage.setAllowScrolling(false, 'down');
 
//disabling scrolling down and right
$.fn.fullpage.setAllowScrolling(false, 'down, right');

setKeyboardScrolling(boolean, [directions])

添加或者禁止鍵盤對(duì)section/slide的控制，這個(gè)事件是默認(rèn)綁定的忆家。

• directions犹菇，可選參數(shù)，可以設(shè)置的值：all, up, down, left, right或者設(shè)置組合的參數(shù)芽卿，例如down, right揭芍，他設(shè)置的兩個(gè)方向上將禁止或者激活鍵盤的滾動(dòng)。

//disabling all keyboard scrolling
$.fn.fullpage.setKeyboardScrolling(false);
 
//disabling keyboard scrolling down
$.fn.fullpage.setKeyboardScrolling(false, 'down');
 
//disabling keyboard scrolling down and right
$.fn.fullpage.setKeyboardScrolling(false, 'down, right');

setRecordHistory(boolean)

定義是否為每個(gè)URL的變更紀(jì)錄到瀏覽器中的歷史記錄中卸例。

$.fn.fullpage.setRecordHistory(false);

setScrollingSpeed(milliseconds)

定義每個(gè)section/slide滾動(dòng)的時(shí)間称杨，默認(rèn)的時(shí)間單位為毫秒（ms）肌毅。

$.fn.fullpage.setScrollingSpeed(700);

destroy(type)

移除Fullpage的事件和添加的HTML/CSS樣式風(fēng)格，理想的使用在使用Ajax加載內(nèi)容姑原。

• type：可以被設(shè)置為空字符悬而，或者all，如果一旦執(zhí)行锭汛，通過Fullpage添加的HTML/CSS樣式和代碼都將會(huì)被移除笨奠，將顯示沒有使用Fullpage的樣式，一個(gè)使用過任何插件進(jìn)行修改唤殴。

//destroy any plugin event (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();
 
//destroy any plugin event and any plugin modification done over your original HTML markup.
$.fn.fullpage.destroy('all');

reBuild()

更新DOM結(jié)構(gòu)以適應(yīng)新的窗口大小或其內(nèi)容般婆。理想的使用與Ajax調(diào)用或外部網(wǎng)站的DOM結(jié)構(gòu)的變化組合。

$.fn.fullpage.reBuild();

資源延時(shí)加載

fullpage.js提供了一種懶加載圖像朵逝，視頻和音頻元素蔚袍，所以他們不會(huì)放慢您的網(wǎng)站加載或不必要的浪費(fèi)數(shù)據(jù)傳輸。使用延遲加載時(shí)廉侧，所有這些元素只會(huì)加載時(shí)進(jìn)入視口页响。啟用延遲加載，所有你需要做的是改變你的src屬性的data-src如下圖所示：

![](image.png)
<video>
  <source data-src="video.webm" type="video/webm" />
  <source data-src="video.mp4" type="video/mp4" />
</video>

fullPage.js插件回調(diào)函數(shù)

3段誊、函數(shù)

插件回調(diào)函數(shù)使用說明

afterLoad (anchorLink, index)

滾動(dòng)到某一屏后的回調(diào)函數(shù)，接收 anchorLink 和 index 兩個(gè)參數(shù)简逮。

• anchorLink 是錨鏈接的名稱
• index 是section的索引丽已，從1開始計(jì)算

在沒有設(shè)置錨文本的情況下，只有使用唯一的index參數(shù)买决。

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    afterLoad: function(anchorLink, index){
        var loadedSection = $(this);
        //using index
        if(index == 3){
            alert("Section 3 ended loading");
        }
        //using anchorLink
        if(anchorLink == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }
});

<span id="onLeave">onLeave (index, nextIndex, direction)</span>

滾動(dòng)前的回調(diào)函數(shù)，接收 index吼畏、nextIndex 和 direction 3個(gè)參數(shù)

• index 是離開的“頁面”的序號(hào)督赤，從1開始計(jì)算；
• nextIndex 是滾動(dòng)到的“頁面”的序號(hào)泻蚊，從1開始計(jì)算躲舌；
• direction 判斷往上滾動(dòng)還是往下滾動(dòng)，值是 up 或 down性雄。

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        var leavingSection = $(this);
        //after leaving section 2
        if(index == 2 && direction =='down'){
            alert("Going to section 3!");
        }
        else if(index == 2 && direction == 'up'){
            alert("Going to section 1!");
        }
    }
});

取消section的滾動(dòng)

你可以在onLeave 回調(diào)函數(shù)中返回false没卸，那么將取消滾動(dòng)。

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        //it won't scroll if the destination is the 3rd section
        if(nextIndex == 3){
            return false;
        }
    }
});

afterRender()

這個(gè)回調(diào)函數(shù)只是在生成頁面結(jié)構(gòu)的時(shí)候調(diào)用秒旋。這是要用來初始化其他插件或刪除任何需要的文件準(zhǔn)備好代碼的回調(diào)（這個(gè)插件修改DOM創(chuàng)建得到的結(jié)構(gòu)）约计。

$('#fullpage').fullpage({
    afterRender: function(){
        var pluginContainer = $(this);
        alert("The resulting DOM structure is ready");
    }
});

afterResize()

這個(gè)回調(diào)函數(shù)在窗口發(fā)生大小改變的時(shí)候被調(diào)用，就在部分調(diào)整迁筛。

$('#fullpage').fullpage({
    afterResize: function(){
        var pluginContainer = $(this);
        alert("The sections have finished resizing");
    }
});

afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)

滾動(dòng)到某一水平滑塊后的回調(diào)函數(shù)煤蚌，與 afterLoad 類似，接收 anchorLink细卧、index尉桩、slideIndex、direction 4個(gè)參數(shù)贪庙。

• anchorLink: anchorLink corresponding to the section.
• index: index of the section. Starting from 1.
• slideAnchor: anchor corresponding to the slide (in case there is)
• slideIndex: index of the slide. Starting from 1. (the default slide doesn’t count as slide, but as a section)
  在沒有anchorlinks的幻燈片或幻燈片SlideIndex參數(shù)是唯一使用定義的情況下蜘犁。

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
 
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);
 
        //first slide of the second section
        if(anchorLink == 'secondPage' && slideIndex == 1){
            alert("First slide loaded");
        }
 
        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 && slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
});

onSlideLeave (anchorLink, index, slideIndex, direction, nextSlideIndex)

某一水平滑塊滾動(dòng)前的回調(diào)函數(shù)，與 onLeave 類似止邮，接收 anchorLink这橙、index、slideIndex农尖、direction 4個(gè)參數(shù)析恋。

• anchorLink: anchorLink corresponding to the section.
• index: index of the section. Starting from 1.
• slideIndex: index of the slide. Starting from 0.
• direction: takes the values right or left depending on the scrolling direction.
• nextSlideIndex: index of the destination slide. Starting from 0.

$('#fullpage').fullpage({
    onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
        var leavingSlide = $(this);
 
        //leaving the first slide of the 2nd Section to the right
        if(index == 2 && slideIndex == 0 && direction == 'right'){
            alert("Leaving the fist slide!!");
        }
 
        //leaving the 3rd slide of the 2nd Section to the left
        if(index == 2 && slideIndex == 2 && direction == 'left'){
            alert("Going to slide 2! ");
        }
    }
});

取消slide滑動(dòng)

你可以設(shè)置回調(diào)函數(shù)onSlideLeave 返回false，那么他將阻止此次的滑動(dòng)事件盛卡，就像onLeave一樣助隧。

常見問題

能否自定義某個(gè)Section的高度？
這個(gè)需求一般出現(xiàn)在頁面的頂部或者是底部，默認(rèn)情況下并村，一個(gè)Section的內(nèi)容會(huì)自動(dòng)填充整個(gè)屏幕巍实，如果你想要某個(gè)Section自適應(yīng)內(nèi)容的高度，你可以給它添加一個(gè)fp-auto-height類哩牍，例如下面的示例代碼棚潦。

<div class="section">Whole viewport</div>
<div class="section fp-auto-height">Auto height</div>
JavaScript代碼無需修改，F(xiàn)ullpage會(huì)自動(dòng)獲取這個(gè)高度并設(shè)置給元素膝昆。

滑動(dòng)卡頓不流暢丸边？
滑動(dòng)卡頓不流暢，這個(gè)問題可能跟硬件有關(guān)荚孵，F(xiàn)ullpage可以支持JS動(dòng)畫和CSS動(dòng)畫妹窖，而據(jù)我觀察JS動(dòng)畫總是有些卡，而CSS動(dòng)畫就很流暢收叶，可能跟瀏覽器硬件平臺(tái)有關(guān)系骄呼，所以盡量選擇CSS動(dòng)畫作為頁面過度的動(dòng)畫效果。

還有一點(diǎn)Fullpage默認(rèn)綁定了鼠標(biāo)的滑輪和鍵盤的上下左右鍵判没，當(dāng)一個(gè)動(dòng)畫未執(zhí)行完成時(shí)蜓萄，再操作這個(gè)按鍵是無效的，F(xiàn)ullpage動(dòng)畫不會(huì)疊加在一起執(zhí)行澄峰，這也是比較合乎邏輯的嫉沽。

無法全屏（屏幕底部可以看到下一屏幕的內(nèi)容）？
1摊阀、檢查每個(gè)section的內(nèi)容時(shí)候有超出屏幕的耻蛇，特別是使用了絕對(duì)定位，檢查top胞此、left臣咖、bottom、top設(shè)置的值時(shí)候讓內(nèi)容超出了當(dāng)前的section漱牵。

2夺蛇、檢查靠邊（上下左右）元素的line-height是否為0，可以將line-height:0;設(shè)置為0看看時(shí)候解決問題酣胀。

3刁赦、另外，可以通過逐個(gè)將section的代碼注釋的方法闻镶，找到有問題的section甚脉，從而縮小問題的范圍。

設(shè)置了fp-auto-height為何不生效铆农？
很可能是你的fullpage不是最新版的牺氨，建議到作者的github上直接下載或使用git克隆下來。fullpage官網(wǎng)github地址

不同分辨率的屏幕顯示效果不同？
解決這更替猴凹，可以通過@media指定不同屏幕下的樣式夷狰。例如：

@media screen and (min-width:1920px) {
    .page1 { background: url(../images/bg1.jpg) center 0 no-repeat;}
    .page2 { background: url(../images/bg2.jpg) center 0 no-repeat;}
    .page3 { background: url(../images/bg3.jpg) center 0 no-repeat;}
    .page4 { background: url(../images/bg4.jpg) center 0 no-repeat;}
    .page5 { background: url(../images/bg5.jpg) center 0 no-repeat;}
    /*.page6 { background: url(../images/bg6.jpg) center 0 no-repeat;}*/
    .page7 { background: url(../images/bg7.jpg) center 0 no-repeat;}
    .page9 { background: url(../images/bg9.jpg) center 0 no-repeat;}
    
    .page2-img{
      margin-top: 100px;
      margin-left: -720px;
    }   
    省略...
}
@media screen and (max-width:1440px) {
    .cnc { background: url(../images/bg3-xs.jpg) center 0 no-repeat;}
    省略...
}

Parallax doesn’t work with fullpage.js
Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don’t want to use the auto-scrolling feature.

Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript and the scroll event. fullPage.js doesn’t actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

jQuery scrollTop function doesn’t work
Same answer as Parallax doesn’t work with fullpage.js

jQuery scroll event doesn’t work
Same answer as Parallax doesn’t work with fullpage.js

Also, consider using the callbacks provided by fullpage.js such as afterLoad, onLeave, afterSlideLeave and onSlideLeave detailed in the docs or the class added to the body element containing the active section/slide.

Is it possible to hide the address bar in mobile phones on landscape
Short answer: on Apple iOS you can do that by avoid using the anchors option of fullPage.js.

Explanation: each browser acts in a different way on this matter and it is not possible right now to control the behavior of the address bar by using javascript. You can try to take a look at different meta tags.

Lazyload doesn’t work
Short answer: use the scrollBar:true option for fullPage.js. Otherwise, you can make use of the callbacks provided by fullPage.js such as onLeave, onSlideLeave, afterLoad, afterSlideLoad and afterRender to load images. One of those techniques is explained in this comment.

Explanation: Lazyload techniques , as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn’t actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

My other plugins don’t work when using fullPage.js
Short answer: initialize them in the afterRender callback of fullPage.js.

Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js or even horizontal slides, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as “dynamically added content” and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.

My javascript/jQuery events don’t work anymore when using fullPage.js
Short answer: if you are using options such as verticalCentered:true or overflowScroll:true in fullPage.js initialization, or even horizontal slides, then you will have to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery). Another option is to add your code in the afterRender callback of fullpage.js

Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js or even horizontal slides, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as “dynamically added content” and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.

How can I set fullscreen videos / backgrounds
Short answer: this has nothing to do with fullPage.js but with CSS knowledge. You should try to find your answers in Google or places such as stackoverflow.com.

Explanation: fullpage.js provides some examples with full backgrounds and full video backgrounds but it has nothing to do with the use of fullPage.js. It is all about CSS.

Fullpage.js jumps one section
Short answer: as detailed in the documentation:

Be careful! data-anchor tags can not have the same value as any ID element on the site (or NAME element for IE).
Explanation: there’s no way to avoid the browser’s behavior towards the use of anchors in the URL (#) when an element with the id or name attribute exists in the DOM with the exact same value.

Is it possible to scroll automatically through sections / slides?
Short answer: Yep. Check this video tutorial for the automatic vertical scroll or this topic for the horizontal one.

參考文檔

1、fullpage插件官方github地址

2郊霎、fp-auto-height屬性官方demo（底部可選擇其他demo）

3沼头、jQuery全屏滾動(dòng)插件fullPage.js-源碼下載

4、fullPage.js制作魅藍(lán)note2頁面-實(shí)例教程

5书劝、fullpage入門指南-超詳細(xì)教程