[[410871]]

一. 什么是吸頂?

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

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

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

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

二. 常見的tabbar吸頂方案

1. 基于position粘性定位的吸頂方案
2. 基于JS監聽scroll事件的吸頂方案

三. 方案的原理與對比

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

1.1. 知識詳解

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

MDN傳送門

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

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

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> 

1.3. 可能會踩得坑

1. 使用position:sticky同時，必須同時使用(top、left、right、bottom)中之一，否者無效
2. 父元素不能overflow:hidden或者overflow:auto屬性，否者無效
3. 父元素的高度不能小于sticky元素的高度，否者無效
4. 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); 

四. 總結

永遠不存在最好的技術或者技術方案，只存在當前業務下的最佳技術和方案。