一. 什么是吸頂?

吸頂效果是web開發(fā)中一種常見的交互方式，常見的應(yīng)用場(chǎng)景有導(dǎo)航、搜索框等等。能夠做流量的橫向分發(fā)，矚目的吸頂效果和橫滑切tab的手勢(shì)，能夠讓用戶快速發(fā)現(xiàn)更多商品。

市場(chǎng)上享有H5導(dǎo)航欄吸頂效果展示

1.淘寶聚劃算吸頂演示：

2.淘寶百億補(bǔ)貼吸頂演示：

二. 常見的tabbar吸頂方案

• 基于position粘性定位的吸頂方案
• 基于JS監(jiān)聽scroll事件的吸頂方案

三. 方案的原理與對(duì)比

1. position粘性方案的實(shí)現(xiàn)與詳解

1.1. 知識(shí)詳解

position使我們經(jīng)常使用的CSS屬性，能夠在布局和解決一些特定問題時(shí)候帶來很好的解決方案，例如，卡片的各種icon和標(biāo)。position粘性定位也是實(shí)現(xiàn)吸頂?shù)姆桨钢?，先看看position具有哪些屬性值及相關(guā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. 可能會(huì)踩得坑

•  使用position:sticky同時(shí)，必須同時(shí)使用(top、left、right、bottom)中之一，否者無效
• 父元素不能overflow:hidden或者overflow:auto屬性，否者無效
• 父元素的高度不能小于sticky元素的高度，否者無效
• sticky元素僅在其父元素內(nèi)生效

2. JS監(jiān)聽scroll事件的吸頂方案

知識(shí)詳解 整體思路是通過js對(duì)滾動(dòng)事件的監(jiān)聽，當(dāng)滾動(dòng)到頂部時(shí)(距頂部的距離為0時(shí)),動(dòng)態(tài)的將元素的position屬性更改為fixed，進(jìn)行固定定位達(dá)到吸頂?shù)男Ч?判斷距離頂部的距離比較常規(guī)的是使用offsetTop，但offsetTop是相對(duì)定位父級(jí)的偏移量，倘若需要滾動(dòng)吸頂?shù)脑爻霈F(xiàn)定位父級(jí)元素，那么 offsetTop 獲取的就不是元素距離頁面頂部的距離。這里我們考慮使用 getBoundingClientRect() 獲取頁面中某個(gè)元素相對(duì)瀏覽器視窗上下左右的距離。 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)航欄吸頂方案原理與對(duì)比實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Html5 導(dǎo)航欄吸頂內(nèi)容請(qǐng)搜索武林網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持武林網(wǎng)！