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