Fullpage.js固定導航欄-實現(xiàn)定位導航欄
FullPage.js 是一個簡單而易于使用的插件，用來創(chuàng)建全屏滾動網(wǎng)站（也被稱為單頁網(wǎng)站）。除了可以創(chuàng)建全屏滾動效果以外，也可以給網(wǎng)站添加一些水平的滑塊效果。能夠自適應不同的屏幕尺寸，包括平板電腦和移動設備。
開始制作自己的個人簡歷啦，決定要使用固定導航欄，又打算使用fullpage.js做全屏滾動。
仔細看了fullpage文檔之后，發(fā)現(xiàn)不用額外寫js代碼就可以實現(xiàn)以下效果：
1.當滾動翻頁時，導航欄也自動定位到這一頁的標簽
2.當然點擊標簽時，也是滾動到那一頁而不是直接跳轉(zhuǎn)的。
一、準備工作肯定是要先導入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的，所以要記得導入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">聯(lián)系方式</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'});
});
我的配置內(nèi)容如圖，第一條 paddingTop: '50px'，是為了給固定導航欄騰出空間
第二條：anchors,這個是依次給滾動頁設置錨點，注意這里需要和導航欄里的li標簽的data-menuanchor屬性以及a的href屬性對應。
第三條：就是綁定菜單，也就是上面的導航欄。
五、增加active類的樣式
這樣，fullpage就配置好了，但是導航欄的樣式還不能根據(jù)頁面變化我們先查看一下控制臺
當頁面滾動時，fullpage.js會給菜單里的對應項加入active類，這樣就好辦了我們加一條css樣式，給active類改變背景色
.active{background-color: #609F98;}
這樣，所有的效果就實現(xiàn)啦
PS:潛在的小bug，因為fullpage會在當前滾動頁也加入active類，也就意味著這個css樣式會影響該頁的背景顏色（還好我用的背景圖，不受影響，機智如我，哈哈），我猜想要解決的話，那可能要給section類加背景顏色，再加個!important吧。
好了，關于Fullpage.js固定導航欄-實現(xiàn)定位導航欄的相關內(nèi)容就給大家介紹到這里，希望對大家有所幫助！
相關文章
Three.js使用OrbitControls后修改相機旋轉(zhuǎn)方向無效解決辦法
three.js是用javascript寫的基于webGL的第三方3D庫,下面這篇文章主要給大家介紹了關于Three.js使用OrbitControls后修改相機旋轉(zhuǎn)方向無效的解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
什么是函數(shù)式編程？根據(jù)百度百科的描述，“函數(shù)式編程是種編程典范，它將電腦運算視為函數(shù)的計算。函數(shù)編程語言最重要的基礎是 λ 演算（lambda calculus）。而且λ演算的函數(shù)可以接受函數(shù)當作輸入（參數(shù)）和輸出（返回值）?！?/div> 2015-10-10
這篇文章主要給大家介紹了關于如何基于three.js實現(xiàn)的3D粒子動效的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用three.js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
這篇文章主要給大家介紹了關于js數(shù)組常用19種方法,大家可以看看你會的到底有多少呢,在日常開發(fā)中我們會接觸到js中數(shù)組的一些方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了js獲取url頁面id，也就是最后的數(shù)字文件名，有時候我們需要判斷當前頁面的id，又不用重新生成頁面直接用js獲取最后的數(shù)字.htm即可2020-09-09
跟網(wǎng)上的一些常用的不太一樣，個人都有個人常用的代碼，大家看到好東西，不一定什么都會，起碼要知道有這么個東西。方便以后用也方便找。2009-04-04
眾所周知,微信小程序制作成功后,是需要提交到微信公眾平臺去審核的,審核通過后,才可以發(fā)布上線的,上線了之后才可以進行運營的,下面這篇文章主要給大家介紹了關于微信小程序上線發(fā)布具體流程的相關資料,需要的朋友可以參考下2022-10-10
原生js獲取iframe中dom元素--父子頁面相互獲取對方dom元素的方法
下面小編就為大家?guī)硪黄鷍s獲取iframe中dom元素--父子頁面相互獲取對方dom元素的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JavaScript中的操作符==與===介紹,本文講解了===操作符的判斷規(guī)則、==操作符的判斷規(guī)則,需要的朋友可以參考下2014-12-12
這篇文章主要給大家介紹了關于微信小程序HTTP請求從0到1封裝的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09最新評論