導(dǎo)航吸頂效果是前端開發(fā)中常用的需求，通常方法時(shí)監(jiān)聽頁面滾動，當(dāng)滾動距離大于導(dǎo)航距離父元素的距離時(shí)就設(shè)置導(dǎo)航固定定位。此時(shí)需要注意的是，當(dāng)給導(dǎo)航設(shè)置固定定位后會脫離標(biāo)準(zhǔn)流，下面的內(nèi)容就會頂上去原來的位置，因此需要有一個(gè)元素占位，這樣滾動距離不大時(shí)不會導(dǎo)致內(nèi)容被遮蓋的現(xiàn)象。另外還有一種純CSS的實(shí)現(xiàn)方式，則很少為人知曉。且聽我慢慢道來。
方式一：使用JS監(jiān)聽滾動的方式實(shí)現(xiàn)
- 結(jié)構(gòu)
<body>
<div class="header">頭部信息欄</div>
<div class="navbar" id="navbar">中部導(dǎo)航欄</div>
<!-- 占位 -->
<div class="position hide" id="position"></div>
<div class="content">
內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)部部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)
</div>
</body>
- 樣式
body{
margin: 0;
}
.header{
width: 100%;
height: 100px;
background-color:pink;
text-align: center;
line-height: 100px;
}
.navbar{
width: 100%;
height: 40px;
line-height: 40px;
background-color: green;
text-align: center;
}
.position{
width: 100%;
height: 40px;
}
/* 方式一：添加類 */
.fixed{
position: fixed;
top: 0;
left: 0;
}
/* 方式二：使用屬性選擇器
.navbar[data-fixed="fixed"] {
position: fixed;
top: 0;
left: 0;
}
*/
.hide{
display: none
}
- 邏輯
var navbar = document.getElementById('navbar')
var position = document.getElementById('position')
var navbarTop = navbar.offsetTop; // 獲取導(dǎo)航欄到父元素的頂部距離
// 監(jiān)聽滾動
window.onscroll = function () {
// 獲取滾動的距離
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop ;
/*方式一：動態(tài)綁定類*/
// 滾動高度>元素距離頂部的位置時(shí)添加類，否則移除類
scrollTop > navbarTop ? navbar.classList.add('fixed') : navbar.classList.remove('fixed')
// 控制占位內(nèi)容是否顯示
scrollTop > navbarTop ? position.classList.remove('hide') : position.classList.add('hide')
/* 方式二：動態(tài)綁定屬性
navbar.setAttribute('data-fixed', scrollTop > navbarTop ? 'fixed' : '');
*/
}
方式二：使用純CSS的方式實(shí)現(xiàn)
注意：該方式存在兼容性問題，請謹(jǐn)慎使用，注意兼任。
- 結(jié)構(gòu)
<body>
<div class="header">頭部信息欄</div>
<div class="navbar" id="navbar">中部導(dǎo)航欄</div>
<div class="content">
內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)內(nèi)部部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)部區(qū)域內(nèi)
</div>
</body>
- 樣式
body {
margin: 0;
}
.header {
width: 100%;
height: 100px;
background-color: pink;
text-align: center;
line-height: 100px;
}
.navbar {
width: 100%;
height: 40px;
line-height: 40px;
background-color: green;
text-align: center;
/* 粘性定位*/
position: sticky;
left: 0;
top: 0;
z-index: 99
}
