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吧。

看看最終效果吧:我的個人簡歷頁:wzlinsen.com

(還沒完工,還是工地,只看這個效果就好,別看其他了,空白一片,捂臉)

每天進步一點,求大牛收留給個實習啦 :p


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM