Html5導(dǎo)航欄吸頂方案的示例分析

這篇文章主要介紹Html5導(dǎo)航欄吸頂方案的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),建安企業(yè)網(wǎng)站建設(shè),建安品牌網(wǎng)站建設(shè),網(wǎng)站定制,建安網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,建安網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

一. 什么是吸頂?

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

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

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

2.淘寶百億補貼吸頂演示：

 

二. 常見的tabbar吸頂方案

• 基于position粘性定位的吸頂方案

• 基于JS監(jiān)聽scroll事件的吸頂方案

三. 方案的原理與對比

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

1.1. 知識詳解

position使我們經(jīng)常使用的CSS屬性，能夠在布局和解決一些特定問題時候帶來很好的解決方案，例如，卡片的各種icon和標(biāo)。position粘性定位也是實現(xiàn)吸頂?shù)姆桨钢?，先看看position具有哪些屬性值及相關(guān)的含義：

取值	相關(guān)解釋
static	該關(guān)鍵字指定元素使用正常的布局行為，即元素在文檔常規(guī)流中當(dāng)前的布局位置。此時 top, right, bottom, left 和 z-index 屬性無效。
relative	該關(guān)鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調(diào)整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素?zé)o效。
absolute	元素會被移出正常文檔流，并不為元素預(yù)留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設(shè)置外邊距（margins），且不會與其他邊距合并。
fixed	元素會被移出正常文檔流，并不為元素預(yù)留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現(xiàn)在的每頁的固定位置。fixed 屬性會創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform, perspective 或 filter 屬性非 none 時，容器由視口改為該祖先。
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，就要滾出顯示器屏幕的時候，表現(xiàn)為fixed。這個屬性曾經(jīng)被chrome放棄過，不過后來又得到了支持

<!--示例用法-->
nav{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

1.2 兼容性

如上圖所示，position的sticky已經(jīng)被各類游覽器支持，并且得到了比較好的支持，除safari還需-webkit-前綴支持外。

demo實現(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. 可能會踩得坑

•  使用position:sticky同時，必須同時使用(top、left、right、bottom)中之一，否者無效

• 父元素不能overflow:hidden或者overflow:auto屬性，否者無效

• 父元素的高度不能小于sticky元素的高度，否者無效

• sticky元素僅在其父元素內(nèi)生效

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

知識詳解 整體思路是通過js對滾動事件的監(jiān)聽，當(dāng)滾動到頂部時(距頂部的距離為0時),動態(tài)的將元素的position屬性更改為fixed，進(jìn)行固定定位達(dá)到吸頂?shù)男Ч?判斷距離頂部的距離比較常規(guī)的是使用offsetTop，但offsetTop是相對定位父級的偏移量，倘若需要滾動吸頂?shù)脑爻霈F(xiàn)定位父級元素，那么 offsetTop 獲取的就不是元素距離頁面頂部的距離。這里我們考慮使用 getBoundingClientRect()獲取頁面中某個元素相對瀏覽器視窗上下左右的距離。 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);

以上是“Html5導(dǎo)航欄吸頂方案的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：Html5導(dǎo)航欄吸頂方案的示例分析
網(wǎng)頁地址：http://muchs.cn/article4/pphoie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網(wǎng)站收錄、網(wǎng)站制作、外貿(mào)建站、定制網(wǎng)站、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)