溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Html5導航欄吸頂方案的示例分析

發布時間:2021-03-20 14:02:02 來源:億速云 閱讀:281 作者:小新 欄目:web開發

這篇文章主要介紹Html5導航欄吸頂方案的示例分析,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

一. 什么是吸頂?

吸頂效果是web開發中一種常見的交互方式,常見的應用場景有導航、搜索框等等。能夠做流量的橫向分發,矚目的吸頂效果和橫滑切tab的手勢,能夠讓用戶快速發現更多商品。

市場上享有H5導航欄吸頂效果展示

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

Html5導航欄吸頂方案的示例分析

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

Html5導航欄吸頂方案的示例分析 

二. 常見的tabbar吸頂方案

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

  • 基于JS監聽scroll事件的吸頂方案

三. 方案的原理與對比

1. position粘性方案的實現與詳解

1.1. 知識詳解

position使我們經常使用的CSS屬性,能夠在布局和解決一些特定問題時候帶來很好的解決方案,例如,卡片的各種icon和標。position粘性定位也是實現吸頂的方案之一,先看看position具有哪些屬性值及相關的含義:

取值相關解釋
static該關鍵字指定元素使用正常的布局行為,即元素在文檔常規流中當前的布局位置。此時 top, right, bottom, left 和 z-index 屬性無效。
relative該關鍵字下,元素先放置在未添加定位時的位置,再在不改變頁面布局的前提下調整元素位置(因此會在此元素未添加定位時所在位置留下空白)。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。
absolute元素會被移出正常文檔流,并不為元素預留空間,通過指定元素相對于最近的非 static 定位祖先元素的偏移,來確定元素位置。絕對定位的元素可以設置外邊距(margins),且不會與其他邊距合并。
fixed元素會被移出正常文檔流,并不為元素預留空間,而是通過指定元素相對于屏幕視口(viewport)的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時,元素會出現在的每頁的固定位置。fixed 屬性會創建新的層疊上下文。當元素祖先的 transform, perspective 或 filter 屬性非 none 時,容器由視口改為該祖先。
sticky元素根據正常文檔流進行定位,然后相對它的最近滾動祖先(nearest scrolling ancestor)和 containing block (最近塊級祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值進行偏移。偏移值不會影響任何其他元素的位置。

MDN傳送門

關于sticky屬性,顧名思義,單詞sticky的中文意思是“粘性的”,其效果是position:relative和position:fixed的結合。當元素在屏幕內,表現為relative,就要滾出顯示器屏幕的時候,表現為fixed。這個屬性曾經被chrome放棄過,不過后來又得到了支持

Html5導航欄吸頂方案的示例分析

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

1.2 兼容性

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

demo實現:

  *{
        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>

Html5導航欄吸頂方案的示例分析 

1.3. 可能會踩得坑

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

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

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

  • sticky元素僅在其父元素內生效

2. JS監聽scroll事件的吸頂方案

知識詳解 整體思路是通過js對滾動事件的監聽,當滾動到頂部時(距頂部的距離為0時),動態的將元素的position屬性更改為fixed,進行固定定位達到吸頂的效果。 判斷距離頂部的距離比較常規的是使用offsetTop,但offsetTop是相對定位父級的偏移量,倘若需要滾動吸頂的元素出現定位父級元素,那么 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導航欄吸頂方案的示例分析

以上是“Html5導航欄吸頂方案的示例分析”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女