日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
一篇帶給你H5吸頂方案

一. 什么是吸頂?

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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了灌南免費(fèi)建站歡迎大家使用！

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

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

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

二. 常見(jiàn)的tabbar吸頂方案

  1. 基于position粘性定位的吸頂方案
  2. 基于JS監(jiān)聽(tīng)scroll事件的吸頂方案

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

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

1.1. 知識(shí)詳解

position使我們經(jīng)常使用的CSS屬性，能夠在布局和解決一些特定問(wèn)題時(shí)候帶來(lái)很好的解決方案，例如，卡片的各種icon圖標(biāo)。position粘性定位也是實(shí)現(xiàn)吸頂?shù)姆桨钢唬瓤纯磒osition具有哪些屬性值及相關(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放棄過(guò)，不過(guò)后來(lái)又得到了支持

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2. nav{ 
    3.   
  
  
  
  3.     position: -webkit-sticky; 
    4.   
  
  
  
  4.     position: sticky; 
    5.   
  
  
  
  5.     top:  
    6.

1.2 兼容性

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

demo實(shí)現(xiàn)：

 
 
 
 
    
  
  
  
  
  1. *{ 
    2.   
  
  
  
  2.      padding:0; 
    3.   
  
  
  
  3.      margin:0; 
    4.   
  
  
  
  4.  } 
    5.   
  
  
  
  5.  .container{ 
    6.   
  
  
  
  6.      width:100%; 
    7.   
  
  
  
  7.      background:rgba(0,0,0,.5); 
    8.   
  
  
  
  8.  } 
    9.   
  
  
  
  9.  .nav{ 
    10.   
  
  
  
  10.      width:100%; 
    11.   
  
  
  
  11.      height:50px; 
    12.   
  
  
  
  12.      text-align: center; 
    13.   
  
  
  
  13.      line-height: 50px; 
    14.   
  
  
  
  14.      background: black; 
    15.   
  
  
  
  15.      color:white; 
    16.   
  
  
  
  16.      position: sticky; 
    17.   
  
  
  
  17.      top:0; 
    18.   
  
  
  
  18.  } 
    19.   
  
  
  
  19.  .body{ 
    20.   
  
  
  
  20.      width:100%; 
    21.   
  
  
  
  21.      height:10000px; 
    22.   
  
  
  
  22.  } 
    23.  
 
 
 
  
 
 
 
    
   
  
  
  
  1.  
    2.    
  
  
  
  2.     
 
  •     position sticky 粘性定位
    •  
  •     
    •  
  •  

    1.3. 可能會(huì)踩得坑

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

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

    知識(shí)詳解 整體思路是通過(guò)js對(duì)滾動(dòng)事件的監(jiān)聽(tīng)，當(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 獲取的就不是元素距離頁(yè)面頂部的距離。這里我們考慮使用getBoundingClientRect()獲取頁(yè)面中某個(gè)元素相對(duì)瀏覽器視窗上下左右的距離。 MDN傳送門

     
 
 
 
      
  
  
  
  
    1. function compute(){ 
      2.   
  
  
  
    2.     let ele = document.getElementById('nav'); 
      3.   
  
  
  
    3.      if(ele.getBoundingClientRect().top === 1){ 
      4.   
  
  
  
    4.       ele.style.position = "sticky"; 
      5.   
  
  
  
    5.       ele.style.top = 0; 
      6.   
  
  
  
    6.      } 
      7.   
  
  
  
    7.     } 
      8.   
  
  
  
    8. window.addEventListener('scroll', compute); 
      9.

    四. 總結(jié)

    永遠(yuǎn)不存在最好的技術(shù)或者技術(shù)方案，只存在當(dāng)前業(yè)務(wù)下的最佳技術(shù)和方案。


    網(wǎng)站題目：一篇帶給你H5吸頂方案
    網(wǎng)址分享：http://www.5511xx.com/article/dhjdgch.html