您好,登錄后才能下訂單哦!
這篇文章主要介紹js怎么實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
對(duì)于導(dǎo)航的吸頂效果,pc端和移動(dòng)端的需求可能有些差異。在pc端,我們通常只需要一個(gè)頂部導(dǎo)航;在移動(dòng)端,在滑動(dòng)頁(yè)面的時(shí)候,更需要多個(gè)標(biāo)題的吸頂(例如地區(qū)的選擇,需要將省份吸頂)。
單個(gè)標(biāo)題吸頂和多個(gè)標(biāo)題吸頂?shù)膮^(qū)別在于:多個(gè)標(biāo)題吸頂需要確定一個(gè)高度范圍,在這個(gè)范圍中只能有一個(gè)標(biāo)題吸頂,其他都是固定效果。
一、頁(yè)面布局及樣式
此處為了測(cè)試效果,用了幾個(gè)重復(fù)的section標(biāo)簽,大家根據(jù)實(shí)際需求編寫布局和樣式。
<body> <ul id="container"> <h2>實(shí)現(xiàn)多個(gè)標(biāo)題的吸頂</h2> <section> <div class="box">header1</div> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </section> <!--設(shè)置多個(gè)如header1的子列表,窗口可以進(jìn)行滾動(dòng),此處省略--> <section> <div class="box">header5</div> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </section> </ul> </body>
<style type="text/css"> * { padding: 0; margin: 0; } ul { width: 100%; } li { width: 200px; color: white; margin: 10px; list-style: none; border-radius: 5px; border: 1px solid #191970; background: #4169E1; text-align: center; } div { width: 100%; height: 30px; color: white; padding-left: 20px; background: #DC143C; } .box1 { position: fixed; top: 0; } </style>
二、js的編寫
1、獲取所有需要吸頂效果的標(biāo)題。這里的標(biāo)題最好用相同的布局和樣式,獲取時(shí)能夠更快捷和統(tǒng)一。
var box = document.getElementsByClassName('box'), //獲取所有需要吸頂效果的標(biāo)題 section = document.getElementsByTagName('section'); //獲取所有子列表,后面有用
2、獲取標(biāo)題個(gè)數(shù)和定義一個(gè)數(shù)組,用來(lái)存放每個(gè)標(biāo)題到父元素的距離(offsetTop)。
var ot = [], //存儲(chǔ)每個(gè)標(biāo)題的offsetTop len = box.length; //標(biāo)題的個(gè)數(shù)
3、遍歷所有標(biāo)題,獲取offsetTop,并存入ot數(shù)組中。
for(let i=0; i<len; i++) { ot.push(box[i].offsetTop); //獲取每個(gè)標(biāo)題的offsetTop }
4、監(jiān)聽window的滾動(dòng)事件,獲取scrollTop;如果滾動(dòng)高度位于第i個(gè)標(biāo)題的offsetTop和第i+1個(gè)標(biāo)題的offsetTop之間(例如滾動(dòng)的高度位于header1和header2的offsetTop之間,heade1吸頂),則第i個(gè)標(biāo)題添加box1樣式,實(shí)現(xiàn)吸頂。
window.onscroll = function () { //獲取滾動(dòng)的高度 var st = document.documentElement.scrollTop || document.body.scrollTop; for(let i=0; i<len; i++) { if(st>ot[i] && st<ot[i+1]) { //滾動(dòng)時(shí)監(jiān)聽位置,為標(biāo)題的吸頂設(shè)置一個(gè)現(xiàn)實(shí)范圍 box[i].className = 'box box1'; } else { box[i].className = 'box'; } } }
5、第四步中,有個(gè)問(wèn)題:當(dāng)滾動(dòng)道最后一個(gè)標(biāo)題(i)時(shí),無(wú)法獲?。╥+1)。
解決方法:從第一步中獲得的section標(biāo)簽集合中拿出最后一個(gè)子列表(section[0]),然后獲取最后一個(gè)子列表的高度,計(jì)算出最后一個(gè)標(biāo)題的顯示高度范圍,并存入ot數(shù)組中。
//獲取最后一個(gè)子列表的高度,為了設(shè)置最后一個(gè)吸頂標(biāo)題的位置 //section[len-1].getBoundingClientRect().height //此方法返回一個(gè)number ot.push(box[len-1].offsetTop + section[len-1].getBoundingClientRect().height);
三、最后效果
完整js代碼
var box = document.getElementsByClassName('box'), //獲取所有需要吸頂效果的標(biāo)題 section = document.getElementsByTagName('section'); //獲取所有子列表 var ot = [], //存儲(chǔ)每個(gè)標(biāo)題的offsetTop len = box.length; //標(biāo)題的個(gè)數(shù) for(let i=0; i<len; i++) { ot.push(box[i].offsetTop); //獲取每個(gè)標(biāo)題的offsetTop } //獲取最后一個(gè)子列表的高度,為了設(shè)置最后一個(gè)吸頂標(biāo)題的位置 //section[len-1].getBoundingClientRect().height //此方法返回一個(gè)number ot.push(box[len-1].offsetTop + section[len-1].getBoundingClientRect().height); window.onscroll = function () { //獲取滾動(dòng)的高度 var st = document.documentElement.scrollTop || document.body.scrollTop; for(let i=0; i<len; i++) { if(st>ot[i] && st<ot[i+1]) { //滾動(dòng)時(shí)監(jiān)聽位置,為標(biāo)題的吸頂設(shè)置一個(gè)現(xiàn)實(shí)范圍 box[i].className = 'box box1'; } else { box[i].className = 'box'; } } }
以上是“js怎么實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(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)容。