FullPage.js 是一個(gè)簡單而易于使用的插件，用來創(chuàng)建全屏滾動(dòng)網(wǎng)站（也被稱為單頁網(wǎng)站）。接下來通過本文給大家介紹Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄，對(duì)fullpage.js導(dǎo)航欄相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧

FullPage.js 是一個(gè)簡單而易于使用的插件，用來創(chuàng)建全屏滾動(dòng)網(wǎng)站（也被稱為單頁網(wǎng)站）。除了可以創(chuàng)建全屏滾動(dòng)效果以外，也可以給網(wǎng)站添加一些水平的滑塊效果。能夠自適應(yīng)不同的屏幕尺寸，包括平板電腦和移動(dòng)設(shè)備。

開始制作自己的個(gè)人簡歷啦，決定要使用固定導(dǎo)航欄，又打算使用fullpage.js做全屏滾動(dòng)。

仔細(xì)看了fullpage文檔之后，發(fā)現(xiàn)不用額外寫js代碼就可以實(shí)現(xiàn)以下效果：

1.當(dāng)滾動(dòng)翻頁時(shí)，導(dǎo)航欄也自動(dòng)定位到這一頁的標(biāo)簽

2.當(dāng)然點(diǎn)擊標(biāo)簽時(shí)，也是滾動(dòng)到那一頁而不是直接跳轉(zhuǎn)的。

一、準(zhǔn)備工作肯定是要先導(dǎo)入fullpage.js啦；

官網(wǎng)是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的，所以要記得導(dǎo)入jquery哦。

二、導(dǎo)航欄結(jié)構(gòu)

<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">聯(lián)系方式</a></li>
</ul>

上面導(dǎo)航欄的結(jié)構(gòu)是這樣的，其中的data-menuanchor就是fullpage要求的，a便簽的href屬性也要相對(duì)應(yīng)的值咯。

三、滾動(dòng)頁的結(jié)構(gòu)很簡單，如下

<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'});
});

我的配置內(nèi)容如圖，第一條 paddingTop: '50px'，是為了給固定導(dǎo)航欄騰出空間

第二條：anchors,這個(gè)是依次給滾動(dòng)頁設(shè)置錨點(diǎn)，注意這里需要和導(dǎo)航欄里的li標(biāo)簽的data-menuanchor屬性以及a的href屬性對(duì)應(yīng)。

第三條：就是綁定菜單，也就是上面的導(dǎo)航欄。

五、增加active類的樣式

這樣，fullpage就配置好了，但是導(dǎo)航欄的樣式還不能根據(jù)頁面變化我們先查看一下控制臺(tái)

當(dāng)頁面滾動(dòng)時(shí)，fullpage.js會(huì)給菜單里的對(duì)應(yīng)項(xiàng)加入active類，這樣就好辦了我們加一條css樣式，給active類改變背景色
.active{background-color: #609F98;}

這樣，所有的效果就實(shí)現(xiàn)啦

PS:潛在的小bug，因?yàn)閒ullpage會(huì)在當(dāng)前滾動(dòng)頁也加入active類，也就意味著這個(gè)css樣式會(huì)影響該頁的背景顏色（還好我用的背景圖，不受影響，機(jī)智如我，哈哈），我猜想要解決的話，那可能要給section類加背景顏色，再加個(gè)!important吧。

好了，關(guān)于Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄的相關(guān)內(nèi)容就給大家介紹到這里，希望對(duì)大家有所幫助！

您可能感興趣的文章: