javascript - Position fixed not working in mobile browser

Question

Welcome To Ask or Share your Answers For Others

javascript - Position fixed not working in mobile browser

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Position fixed not working in mobile browser

How to make an element position fixed in Mobile browser (ios and android) ? Element still scrolls with below code in ios < 5 and 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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T23:30:27+0000

position: fixed doesn't work in most of the older versions of iOS and Blackberry. I have tried this fix in most of the mobile browsers and it worked smoothly without any JavaScript plugins.

Use -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>

Categories

javascript - Position fixed not working in mobile browser

javascript - Position fixed not working in mobile browser

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags