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

zhangxiaochunxy

于 2020-02-13 00:19:02 发布

阅读量1.2k

点赞数

文章标签： js web javascript css3

本文链接：https://blog.csdn.net/zhangxiaochunxy/article/details/104289423

版权

在iOS设备上，遇到一个固定定位(fixed)的顶部导航在下拉刷新时消失的问题。该导航需要始终保持在页面顶端。尝试过修改CSS属性如`-webkit-transform: translateZ(0)`和`position: sticky`并未奏效。最终通过JavaScript解决，监听滚动事件，下拉时将fixed变为absolute，上滑时恢复fixed，成功解决了导航消失的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查看原文
今天在开发过程中遇到了一个定位为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}去掉就可以。不知道是不是我操作不对，也不行。致此࿰