Fullpage.js固定導覽列-實作定位導覽列_javascript技巧

FullPage.js 是一個簡單且易於使用的插件，用來建立全螢幕滾動網站（也被稱為單頁網站）。除了可以創建全螢幕滾動效果以外，也可以為網站添加一些水平的滑桿效果。能夠自適應不同的螢幕尺寸，包括平板電腦和行動裝置。

開始製作自己的個人履歷啦，決定要使用固定導覽欄，又打算使用fullpage.js做全螢幕捲動。

仔細看了fullpage文件之後，發現不用額外寫js程式碼就可以實現以下效果：

1.當滾動翻頁時，導覽列也會自動定位到這一頁的標籤

2.當然點擊標籤時，也是滾動到那一頁而不是直接跳轉的。

一、準備工作一定是要先導入fullpage.js啦；

官網是https://github.com/alvarotrigo/fullPage.js

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

fullpage是基於jquery的，所以要記得導入jquery哦。

二、導覽列結構

<ul id="myMenu">
<li data-menuanchor="firstPage" class="menuList"><a href="#firstPage">首页</a></li>
<li data-menuanchor="secondPage"class="menuList"><a href="#secondPage">作品</a></li>
<li data-menuanchor="thirdPage" class="menuList"><a href="#thirdPage">技能</a></li>
<li data-menuanchor="fourthPage"class="menuList"><a href="#fourthPage">联系方式</a></li>
</ul> 

上面導覽列的結構是這樣的，其中的data-menuanchor就是fullpage要求的，a便籤的href屬性也要相對應的值咯。

三、滾動頁的結構很簡單，如下

<div id="fullpage">
<div class="section">1</div>
<div class="section">2</div>
<div class="section">3</div>
<div class="section">4</div>
</div> 

四、要設定fullpage,js

$(document).ready(function() {
$('#fullpage').fullpage({
paddingTop: '50px',
anchors:['firstPage', 'secondPage', 'thirdPage','fourthPage'],
menu: '#myMenu'});
}); 

我的設定內容如圖，第一條 paddingTop: '50px'，是為了給固定導覽列騰出空間

第二條：anchors,這個是依序給滾動頁設定錨點，注意這裡需要和導航欄裡的li標籤的data-menuanchor屬性以及a的href屬性對應。

第三條：就是綁定選單，也就是上面的導覽列。

更多設定項參考這裡：https://github.com/Niefee/My-study-records/blob/master/2016/1/2016%E5%B9%B41%E6%9C%8818 %E6%97%A5.markdown

五、增加active類的樣式

這樣，fullpage就配置好了，但是導覽列的樣式還不能根據頁面變化我們先查看一下控制台

當頁面滾動時，fullpage.js會為選單裡的對應項目加入active類，這樣就好辦了我們加一條css樣式，給active類改變背景色
.active{background-color: #609F98;}

這樣，所有的效果就實現啦

PS:潛在的小bug，因為fullpage會在當前滾動頁也加入active類，也意味著這個css樣式會影響該頁的背景顏色（還好我用的背景圖，不受影響，機智如我，哈哈），我猜想要解決的話，那可能要給section類別加背景顏色，再加個!important吧。

好了，關於Fullpage.js固定導覽列-實現定位導覽列的相關內容就給大家介紹到這裡，希望對大家有幫助！