溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹js怎么實現多個標題吸頂效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
對于導航的吸頂效果，pc端和移動端的需求可能有些差異。在pc端，我們通常只需要一個頂部導航；在移動端，在滑動頁面的時候，更需要多個標題的吸頂（例如地區的選擇，需要將省份吸頂）。
單個標題吸頂和多個標題吸頂的區別在于：多個標題吸頂需要確定一個高度范圍，在這個范圍中只能有一個標題吸頂，其他都是固定效果。
一、頁面布局及樣式
此處為了測試效果，用了幾個重復的section標簽，大家根據實際需求編寫布局和樣式。
<body> <ul id="container"> <h2>實現多個標題的吸頂</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> <!--設置多個如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、獲取所有需要吸頂效果的標題。這里的標題最好用相同的布局和樣式，獲取時能夠更快捷和統一。
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、監聽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]) { //滾動時監聽位置，為標題的吸頂設置一個現實范圍
box[i].className = 'box box1';
} else {
box[i].className = 'box';
}
}
}5、第四步中，有個問題：當滾動道最后一個標題（i）時，無法獲取（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]) { //滾動時監聽位置，為標題的吸頂設置一個現實范圍
box[i].className = 'box box1';
} else {
box[i].className = 'box';
}
}
}以上是“js怎么實現多個標題吸頂效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
