壹 ❀ 引言

對(duì)于樓層導(dǎo)航而言，還有個(gè)重要的功能就是，隨著滾動(dòng)條滾動(dòng)，達(dá)到某層時(shí)得同步點(diǎn)亮樓層導(dǎo)航的小圖片。

由于我前面也說了不打算使用JQ，所以想著用JS去實(shí)現(xiàn)它，實(shí)現(xiàn)并不難，主要得弄清滾動(dòng)滿足怎樣的條件才應(yīng)該點(diǎn)亮對(duì)應(yīng)樓層，我們先看看實(shí)現(xiàn)效果：

貳 ❀ 實(shí)現(xiàn)思路

第一點(diǎn)，因?yàn)槭怯蓾L動(dòng)觸發(fā)的樓層判斷，所以肯定離不開onscroll事件。

第二點(diǎn)，我們貌似要獲取每個(gè)樓層頂端距離視窗頂部的距離，隨著滾動(dòng)條往下滾動(dòng)，此距離會(huì)不斷縮小，當(dāng)接近到某個(gè)距離時(shí)我們判定此樓層入畫，當(dāng)然其它樓層都滿足此判定。

而JQ提供了一個(gè)offset().top方法能獲取這個(gè)值，js中只有一個(gè)offsetTop屬性，獲取的是距離自己最近position屬性為非static的祖先元素的距離，此距離不隨滾動(dòng)條滾動(dòng)而縮小。

當(dāng)然我們有方法模擬計(jì)算出offset().top的值，但沒必要

這里我直接引用了我之前博客得到的結(jié)論：offset().top =offsetTop -scrollTop(offsetTop參考對(duì)象為根元素)。

為了方便理解，我們假設(shè)樓層壹頂端距離視窗頂端為0時(shí)，此時(shí)判定樓層壹入畫，即樓層導(dǎo)航中第一個(gè)按鈕應(yīng)該被點(diǎn)亮。

由于offset().top = offsetTop - scrollTop，此時(shí)樓層壹距離頂端已經(jīng)為0，我們可以得出當(dāng)樓層壹的offsetTop = scrollTop時(shí)，我們認(rèn)定樓層壹入畫。

而當(dāng)樓層貳入畫時(shí)，樓層貳的offsetTop也等于滾動(dòng)條的距離，此時(shí)樓層壹自然會(huì)出畫：

那么現(xiàn)在我們得到了判斷樓層入畫的條件，如果某個(gè)樓層的offsetTop屬性的值小于等于滾動(dòng)條距離時(shí)(如果用等于條件過于苛刻，很難剛好滾動(dòng)到這個(gè)距離點(diǎn)上)，我們點(diǎn)亮對(duì)應(yīng)樓層的導(dǎo)航logo。

為了讓效果更加自然，我們肯定不會(huì)真的讓某個(gè)樓層緊貼頂部時(shí)才判定它滿足條件，肯定是提前某個(gè)距離就判定滿足，所以真正的條件應(yīng)該是offsetTop - 100(這個(gè)數(shù)字看自己感覺) <= scrollTop

你是否會(huì)有，樓層貳入畫時(shí)樓層壹依然滿足offsetTop<=scrollTop條件的疑惑？在JQ里面，我們給某個(gè)元素添加點(diǎn)亮class的同時(shí)，還會(huì)清除掉兄弟元素的該class。

所以在JS里面也是如此，我們利用滿足樓層的索引來控制樣式，而后者滿足條件的索引始終會(huì)覆蓋前面的索引，所以被點(diǎn)亮的永遠(yuǎn)只有一個(gè)。

現(xiàn)在弄懂了思路，代碼就好些了，下面直接貼上了實(shí)現(xiàn)代碼：

叁 ❀ 實(shí)現(xiàn)代碼

HTML部分：

<div class='floor'> <div style='background: #ffb6b9'>壹</div> <div style='background: #fae3d9'>貳</div> <div style='background: #bbded6'>叁</div> <div style='background: #8ac6d1'>肆</div> <div style='background: #fff1ac'>伍</div></div><ul class='floorNav'> <li>壹</li> <li>貳</li> <li>叁</li> <li>肆</li> <li>伍</li></ul>

CSS部分：

* { padding: 0; margin: 0; list-style: none;}.floor>div { height: 900px; line-height: 900px; text-align: center; color: #fff; font-size: 40px;}.floorNav { width: 40px; height: 200px; position: fixed; right: 0; top: 0; bottom: 0; margin: auto; background: #ddd;}.floorNav>li { height: 40px; line-height: 40px; text-align: center; color: #fff;}.active { background: #e4393c; color: #fff;}

JS部分：

//獲取樓層let floors = document.querySelectorAll('.floor>div');//獲取樓層導(dǎo)航let floorNavs = document.querySelectorAll('.floorNav>li');//滾動(dòng)監(jiān)聽window.onscroll = function () { //獲取滾動(dòng)條高度，兼容ie let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //符合點(diǎn)亮條件的樓層索引 let activeIndex; //樓層導(dǎo)航圖標(biāo)點(diǎn)亮控制 floors.forEach((floor, index) => { //檢查各樓層頂端距離視窗頂端距離，如果滿足條件則修改樓層圖標(biāo) floor.offsetTop - 100 <= scrollTop ? activeIndex = index : null; }); //根據(jù)索引數(shù)設(shè)置樓層樣式 floorNavs.forEach((nav, index) => { index === activeIndex ? nav.classList.add(’active’) : nav.classList.remove(’active’); });};

需要注意的是，這里我使用了js中操作classList對(duì)象的add方法與remove方法，這兩個(gè)方法IE并不支持，因?yàn)槲疫@邊是不需要考慮IE的，所以就任性了。

本文只是提供了一個(gè)樓層導(dǎo)航的思路，實(shí)現(xiàn)肯定不是很好，若有更佳的做法，歡迎留言討論，那么本文結(jié)束。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。