解决ios中定位fixed的导航下滑时消失的问题

·  阅读 1707

查看原文

今天在开发过程中遇到了一个定位为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,就解决问题了。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改