您好,登錄后才能下訂單哦!
圖如下所示:
1.點(diǎn)擊跳轉(zhuǎn)到相應(yīng)區(qū)域:
頁(yè)面scroll掉的距離 = 目標(biāo)板塊在文檔中的垂直坐標(biāo) - 起始板塊(目標(biāo)位置)到視圖頂部的距離;
document.body.scrollTop = scrollLength; document.documentElement.scrollTop = scrollLength;
2.滾動(dòng)滾動(dòng)條時(shí)對(duì)應(yīng)的導(dǎo)航鏈接被激活
每個(gè)板塊的導(dǎo)航鏈接對(duì)應(yīng)一個(gè)長(zhǎng)度區(qū)間,當(dāng)滾動(dòng)條滾動(dòng)調(diào)的長(zhǎng)度落在該區(qū)間時(shí),該導(dǎo)航條則被選中。區(qū)間范圍為當(dāng)前板塊的scrollTop值(包含)~下一板塊的ScrollTop值(不包含)。
例如:第一板塊的區(qū)間為0~第二板塊的scrollTop值(即第一板塊的高度),當(dāng)滾動(dòng)條滾動(dòng)的距離落在該區(qū)間時(shí),則第一個(gè)鏈接激活。
如何確定區(qū)間?將鏈接倒敘排列,依次循環(huán)判斷,第一個(gè)(滾動(dòng)條滾動(dòng)的距離>區(qū)間最小值)成立的鏈接即為激活鏈接。
var currIndex=0; window.onscroll = function () { var $cptop = $('.cp-top'); var scrollLength = document.documentElement.scrollTop || document.body.scrollTop; //滾動(dòng)條滾動(dòng)的距離 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; }); //滾動(dòng)的距離大于該區(qū)間的最小top值 if (currIndex != reachedArea.index) { currIndex = reachedArea.index; $(".navField li").removeClass('selected'); $(".navField li").eq(reachedField.index).addClass('selected'); } }
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。