解决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，就解决问题了。