js實(shí)現(xiàn)樓層導(dǎo)航功能
圖如下所示:
1.點(diǎn)擊跳轉(zhuǎn)到相應(yīng)區(qū)域:
頁面scroll掉的距離 = 目標(biāo)板塊在文檔中的垂直坐標(biāo) - 起始板塊(目標(biāo)位置)到視圖頂部的距離;
document.body.scrollTop = scrollLength; document.documentElement.scrollTop = scrollLength;
2.滾動滾動條時(shí)對應(yīng)的導(dǎo)航鏈接被激活
每個(gè)板塊的導(dǎo)航鏈接對應(yīng)一個(gè)長度區(qū)間,當(dāng)滾動條滾動調(diào)的長度落在該區(qū)間時(shí),該導(dǎo)航條則被選中。區(qū)間范圍為當(dāng)前板塊的scrollTop值(包含)~下一板塊的ScrollTop值(不包含)。
例如:第一板塊的區(qū)間為0~第二板塊的scrollTop值(即第一板塊的高度),當(dāng)滾動條滾動的距離落在該區(qū)間時(shí),則第一個(gè)鏈接激活。
如何確定區(qū)間?將鏈接倒敘排列,依次循環(huán)判斷,第一個(gè)(滾動條滾動的距離>區(qū)間最小值)成立的鏈接即為激活鏈接。
var currIndex=0; window.onscroll = function () { var $cptop = $('.cp-top'); var scrollLength = document.documentElement.scrollTop || document.body.scrollTop; //滾動條滾動的距離 var list_area = _.map($('#area li.group'), function (item, index) { return { top: item.offset().top, index: index }; }); //所有的板塊 list_area = _.sortBy(list, function (item) { return -item.index; }); //倒序 var reachedArea = _.find(list_area, function (item) { return scrollLength >= item.top; }); //滾動的距離大于該區(qū)間的最小top值 if (currIndex != reachedArea.index) { currIndex = reachedArea.index; $(".navField li").removeClass('selected'); $(".navField li").eq(reachedField.index).addClass('selected'); } }
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
- JavaScript制作樓層導(dǎo)航效果流程詳解
- js實(shí)現(xiàn)樓層滾動效果
- JS實(shí)現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實(shí)例
- JS實(shí)現(xiàn)導(dǎo)航欄樓層特效
- AngularJS實(shí)現(xiàn)的錨點(diǎn)樓層跳轉(zhuǎn)功能示例
- JS實(shí)現(xiàn)留言板功能[樓層效果展示]
- 純html+css+javascript實(shí)現(xiàn)樓層跳躍式的頁面布局(實(shí)例代碼)
- js實(shí)現(xiàn)樓層效果的簡單實(shí)例
- JavaScript實(shí)現(xiàn)樓層效果
相關(guān)文章
Input 特殊事件onpopertychange和oninput
onpopertychange和oninput的區(qū)別。2009-06-06深入理解JavaScript系列(11) 執(zhí)行上下文(Execution Contexts)
本章我們要講解的是ECMAScript標(biāo)準(zhǔn)里的執(zhí)行上下文和相關(guān)可執(zhí)行代碼的各種類型2012-01-01JS Excel讀取和寫入操作(模板操作)實(shí)現(xiàn)代碼
前一段時(shí)間一直在做報(bào)表,所以肯定會用到Excel的操作,但是在網(wǎng)上查閱資料有關(guān)JS操作excel較少,有的話,也都是老生常談或很零碎的一些東西。2010-04-04深入JS函數(shù)中默認(rèn)參數(shù)的使用詳解
本文主要介紹了深入JS函數(shù)中默認(rèn)參數(shù)的使用詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07