固定位置在移动浏览器中不起作用

小编典典

固定位置在移动浏览器中不起作用

css

如何使元素位置固定在 移动浏览器（iOS和Android）中 ？元素仍在ios <5和android <4中使用以下代码滚动

<html>
 <head>
<style>
     .fixed{
      position:fixed;
      top:0;
      left:0;
    }
</style>
</head>
<body>
     <div class="fixed">
     Hi I m Position Fixed 
     </div>
    <div>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>

    </div>
</body>
</html>

阅读 327

2020-05-16

共1个答案

小编典典

position: fixed在大多数的旧版本中不工作iOS和Blackberry。我已经在大多数移动浏览器中尝试了此修复程序，并且没有任何JavaScript插件即可正常运行。

采用 -webkit-backface-visibility: hidden;

.fixed {

  position: fixed;

  top: 0px;

  left: 0px;

  width: 320px;

  height: 50px;

  background: red;

  -webkit-backface-visibility: hidden;

  /*--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Most Important*/

}


<div class="fixed">

  Hi I m Position Fixed

</div>

<div>

  sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>sample text

  <br/>



</div>

2020-05-16