js實現多個標題吸頂效果

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點擊：次

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

單個標題吸頂和多個標題吸頂的區(qū)別在于：多個標題吸頂需要確定一個高度范圍，在這個范圍中只能有一個標題吸頂，其他都是固定效果。

一、頁面布局及樣式

此處為了測試效果，用了幾個重復的section標簽，大家根據實際需求編寫布局和樣式。

<body>
 <ul id="container">
 <h1>實現多個標題的吸頂</h1>
 <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>
 
 <!--設置多個如header1的子列表，窗口可以進行滾動，此處省略-->
 
 <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、獲取所有需要吸頂效果的標題。這里的標題最好用相同的布局和樣式，獲取時能夠更快捷和統(tǒng)一。

var box = document.getElementsByClassName('box'), //獲取所有需要吸頂效果的標題
  section = document.getElementsByTagName('section'); //獲取所有子列表，后面有用

2、獲取標題個數和定義一個數組，用來存放每個標題到父元素的距離（offsetTop）。

var ot = [],  //存儲每個標題的offsetTop
  len = box.length;   //標題的個數

3、遍歷所有標題，獲取offsetTop，并存入ot數組中。

for(let i=0; i<len; i++) {
 ot.push(box[i].offsetTop);  //獲取每個標題的offsetTop
}

4、監(jiān)聽window的滾動事件，獲取scrollTop；如果滾動高度位于第i個標題的offsetTop和第i+1個標題的offsetTop之間（例如滾動的高度位于header1和header2的offsetTop之間，heade1吸頂），則第i個標題添加box1樣式，實現吸頂。

window.onscroll = function () {
 //獲取滾動的高度
 var st = document.documentElement.scrollTop || document.body.scrollTop;
 
 for(let i=0; i<len; i++) {
 if(st>ot[i] && st<ot[i+1]) { //滾動時監(jiān)聽位置，為標題的吸頂設置一個現實范圍
  box[i].className = 'box box1';
 } else {
  box[i].className = 'box';
 }
 
 }
}

5、第四步中，有個問題：當滾動道最后一個標題（i）時，無法獲?。╥+1）。

解決方法：從第一步中獲得的section標簽集合中拿出最后一個子列表（section[0]），然后獲取最后一個子列表的高度，計算出最后一個標題的顯示高度范圍，并存入ot數組中。

//獲取最后一個子列表的高度，為了設置最后一個吸頂標題的位置
//section[len-1].getBoundingClientRect().height
//此方法返回一個number
 
ot.push(box[len-1].offsetTop + section[len-1].getBoundingClientRect().height);

三、最后效果

完整js代碼

var box = document.getElementsByClassName('box'), //獲取所有需要吸頂效果的標題
 section = document.getElementsByTagName('section'); //獲取所有子列表
 
var ot = [],       //存儲每個標題的offsetTop
 len = box.length;   //標題的個數
 
for(let i=0; i<len; i++) {
 ot.push(box[i].offsetTop);  //獲取每個標題的offsetTop
}
 
//獲取最后一個子列表的高度，為了設置最后一個吸頂標題的位置
//section[len-1].getBoundingClientRect().height
//此方法返回一個number
 
ot.push(box[len-1].offsetTop + section[len-1].getBoundingClientRect().height);
 
window.onscroll = function () {
 //獲取滾動的高度
 var st = document.documentElement.scrollTop || document.body.scrollTop;
 
 for(let i=0; i<len; i++) {
 if(st>ot[i] && st<ot[i+1]) { //滾動時監(jiān)聽位置，為標題的吸頂設置一個現實范圍
  box[i].className = 'box box1';
 } else {
  box[i].className = 'box';
 }
 
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。

上一篇：JS實現字體背景跑馬燈

欄目：JavaScript

下一篇：微信小程序wx.navigateTo方法里的events參數使用詳情及場景

本文標題：js實現多個標題吸頂效果

本文地址：http://mengdiqiu.com.cn/a1/JavaScript/9266.html

更多JavaScript

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

JavaScript

js實現多個標題吸頂效果

您可能感興趣的文章

閱讀排行

本欄相關

隨機閱讀