js怎么實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果-創(chuàng)新互聯(lián)

這篇文章主要介紹js怎么實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、信陽網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為信陽等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

對于導(dǎo)航的吸頂效果，pc端和移動(dòng)端的需求可能有些差異。在pc端，我們通常只需要一個(gè)頂部導(dǎo)航；在移動(dòng)端，在滑動(dòng)頁面的時(shí)候，更需要多個(gè)標(biāo)題的吸頂（例如地區(qū)的選擇，需要將省份吸頂）。

單個(gè)標(biāo)題吸頂和多個(gè)標(biāo)題吸頂?shù)膮^(qū)別在于：多個(gè)標(biāo)題吸頂需要確定一個(gè)高度范圍，在這個(gè)范圍中只能有一個(gè)標(biāo)題吸頂，其他都是固定效果。

一、頁面布局及樣式

此處為了測試效果，用了幾個(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ù)組，用來存放每個(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è)問題：當(dāng)滾動(dòng)道最后一個(gè)標(biāo)題（i）時(shí)，無法獲?。╥+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怎么實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果

完整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)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：js怎么實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://chinadenli.net/article10/doeodo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、外貿(mào)建站、App設(shè)計(jì)、關(guān)鍵詞優(yōu)化、微信公眾號、軟件開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

js怎么實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果-創(chuàng)新互聯(lián)