解決ios中定位fixed的導航下滑時消失的問題

查看原文

今天在開發過程當中遇到了一個定位爲fixed的導航，在ios設備中下滑消失的問題。這個導航的需求是始終懸浮在頁面最頂端，無論頁面怎麼滑動都不變。

原代碼以下：

<div class="container">
   <div class="back">返回</div>
   <div>
      主題內容
   </div>
</div>
<style>
   .back{
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 50px;
      text-align: center;
   }
</style>
複製代碼

上面的代碼，在正常狀況下是能夠知足需求的，可是在iOS中，當下拉刷新時，多是由於在iOS中fixed的內容是相對於窗口的，而不是相對文檔，因此這個返回導航就會消失。

在網上找了解決方案，有的說是將導航的dom添加css代碼 transform:translate3d(0,0,0);就能夠了，我測試了不行。而後還有的說把html{overflow-x: hidden}去掉就能夠。不知道是否是我操做不對，也不行。致此，css的解決方法是行不通了，因此我用了js。個人解決方案以下。

<div class="container">
   <div id="back" class="back">返回</div>
   <div>
      主題內容
   </div>
</div>
<style>
   .back{
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 50px;
      text-align: center;
   }
</style>
<script>
window.onscroll = function () {
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  if (scrollTop < 0) {
     document.querySelector('#goback').style.position = 'absolute'
  } else {
    document.querySelector('#goback').style.position = 'fixed'
  }
 }
</script>
複製代碼

當監測頁面下拉時，將fixed值換成absolute；上滑時恢復爲fixed，就解決問題了。