| 取值 | 相關(guān)解釋 |
|---|---|
| static | 該關(guān)鍵字指定元素使用正常的布局行為，即元素在文檔常規(guī)流中當(dāng)前的布局位置。此時(shí) top, right, bottom, left 和 z-index 屬性無效。 |
| relative | 該關(guān)鍵字下，元素先放置在未添加定位時(shí)的位置，再在不改變頁面布局的前提下調(diào)整元素位置（因此會在此元素未添加定位時(shí)所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素?zé)o效。 |
| absolute | 元素會被移出正常文檔流，并不為元素預(yù)留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設(shè)置外邊距（margins），且不會與其他邊距合并。 |
| fixed | 元素會被移出正常文檔流，并不為元素預(yù)留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時(shí)不會改變。打印時(shí)，元素會出現(xiàn)在的每頁的固定位置。fixed 屬性會創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform, perspective 或 filter 屬性非 none 時(shí)，容器由視口改為該祖先。 |
| sticky | 元素根據(jù)正常文檔流進(jìn)行定位，然后相對它的最近滾動祖先（nearest scrolling ancestor）和 containing block (最近塊級祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值進(jìn)行偏移。偏移值不會影響任何其他元素的位置。 |
MDN傳送門
關(guān)于sticky屬性，顧名思義，單詞sticky的中文意思是“粘性的”，其效果是position:relative和position:fixed的結(jié)合。當(dāng)元素在屏幕內(nèi)，表現(xiàn)為relative，就要滾出顯示器屏幕的時(shí)候，表現(xiàn)為fixed。這個(gè)屬性曾經(jīng)被chrome放棄過，不過后來又得到了支持
<!--示例用法-->
nav{
position: -webkit-sticky;
position: sticky;
top: 0;
}
1.2 兼容性
如上圖所示，position的sticky已經(jīng)被各類游覽器支持，并且得到了比較好的支持，除safari還需-webkit-前綴支持外。
demo實(shí)現(xiàn)：
*{
padding:0;
margin:0;
}
.container{
width:100%;
background:rgba(0,0,0,.5);
}
.nav{
width:100%;
height:50px;
text-align: center;
line-height: 50px;
background: black;
color:white;
position: sticky;
top:0;
}
.body{
width:100%;
height:10000px;
}
<div class="container">
<div style="width:100%;height:100px;"></div>
<div class="nav">position sticky 粘性定位</div>
<div class="body"></div>
</div>
1.3. 可能會踩得坑
2. JS監(jiān)聽scroll事件的吸頂方案
知識詳解 整體思路是通過js對滾動事件的監(jiān)聽，當(dāng)滾動到頂部時(shí)(距頂部的距離為0時(shí)),動態(tài)的將元素的position屬性更改為fixed，進(jìn)行固定定位達(dá)到吸頂?shù)男Ч?判斷距離頂部的距離比較常規(guī)的是使用offsetTop，但offsetTop是相對定位父級的偏移量，倘若需要滾動吸頂?shù)脑爻霈F(xiàn)定位父級元素，那么 offsetTop 獲取的就不是元素距離頁面頂部的距離。這里我們考慮使用 getBoundingClientRect() 獲取頁面中某個(gè)元素相對瀏覽器視窗上下左右的距離。 MDN傳送門
function compute(){
let ele = document.getElementById('nav');
if(ele.getBoundingClientRect().top === 1){
ele.style.position = "sticky";
ele.style.top = 0;
}
}
window.addEventListener('scroll', compute);
到此這篇關(guān)于Html5導(dǎo)航欄吸頂方案原理與對比實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Html5 導(dǎo)航欄吸頂內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
標(biāo)簽：西藏 漯河 新疆 青島 永州 池州 遼源 棗莊
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《Html5導(dǎo)航欄吸頂方案原理與對比實(shí)現(xiàn)》，本文關(guān)鍵詞 Html5,導(dǎo)航,欄,吸頂,方案,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。