如何使用封裝實現(xiàn)樓層點亮效果（代碼實例）

功能需求:

1.鼠標(biāo)滾動到頁面內(nèi)容樓層時，側(cè)邊導(dǎo)航樓層出現(xiàn)；否則隱藏。

2.鼠標(biāo)滾動到相應(yīng)樓層時，側(cè)邊導(dǎo)航樓層高亮。

3.點擊側(cè)邊導(dǎo)航時，頁面滾動到相應(yīng)樓層。

如下圖：

技術(shù)要點：

1. 熟練使用jquery、js，

2. 動畫 ；scrollTop( ) ; offset( ). top

3. 錨點的應(yīng)用

實現(xiàn)過程：

1. 封裝一個樓層滾動點亮的插件，在主頁面程序中調(diào)用此方法

2.接下來我們深入到插件內(nèi)部，實現(xiàn)插件的具體功能。

1. scrollsoy（options）{ 功能 }，這里我們給插件傳遞了一個參數(shù)，如上圖函數(shù)中傳入了一個對象{target：“div.affix”}，即我們側(cè)邊附加導(dǎo)航的class。如此以來好處是提高代碼的復(fù)用性，今后只要需要這樣的功能，我們只需要修改target的值即可，這就是插件。

2. 在插件內(nèi)定義一個滾動事件，進行樓層開關(guān)的點亮。

   i)、獲取window距離滾動條頂部滾動的距離，var top = $(window).scrollTop()；

   ii)、判斷：

   如果現(xiàn)在滾動在1樓上方（top<1F的距離），做側(cè)邊附加導(dǎo)航欄的淡出效果；

   如果現(xiàn)在滾動在3樓下方（top>3F的距離），做側(cè)邊附加導(dǎo)航欄的淡出效果；

   else，現(xiàn)在1樓和3樓之間，做側(cè)邊附加導(dǎo)航欄的淡入效果；此時，點亮當(dāng)前滾動的樓層開關(guān)。

   遍歷側(cè)邊附加導(dǎo)航欄每個樓層，查看window滾動偏移量超過頁面哪個樓層的偏移量
   如何獲取頁面樓層的偏移量？如上圖側(cè)邊附加導(dǎo)航欄a標(biāo)簽的href屬性與頁面樓層id綁定，通過a標(biāo)簽的href屬性獲取它 在頁面的錨點，再使用offset(). top即可取得頁面樓層的偏移量
   判斷——top>頁面樓層的偏移量，說明窗口已經(jīng)滾動到特定的樓層。給側(cè)邊附加導(dǎo)航欄樓層高亮

3. 在插件內(nèi)定義一個點擊事件，點擊側(cè)邊附加導(dǎo)航欄，頁面滾動到相應(yīng)樓層
   

   首先，阻止超鏈接的默認(rèn)行為

   根據(jù)a的href屬性，找到其對應(yīng)的樓層的距離頁面頂部的偏移量

   使用動畫效果，讓頁面主體滾動到指定的高度。注意此處高亮部分有兼容性問題$('body').animate({scrollTop: 偏移量}, 500)

總結(jié)：

相信大家在看過這個實例之后對封裝有了更好的理解，今后在實現(xiàn)功能的時候我們都可以帶著這樣的眼光去思考問題，以此來提高代碼的復(fù)用性。不過假如能親自動手試一試，嘗一下實際遇到的困難才能發(fā)現(xiàn)自己的問題不斷的提高自己的能力。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com