Vicky Gonsalves Vicky Gonsalves - 3 years ago 288
HTML Question

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>

Answer Source

position: fixed doesnt work in most of the older versions of amongst others iOS and Blackberry. I have tried this fix in most of the mobile browsers and it worked smoothly without any javascript plugins.

<html>
 <head>
<style>
 .fixed{
    position:fixed;
    top:0px;
    left:0px;
    width:320px;
    height:50px;
    background:red;
    -webkit-backface-visibility:hidden; /*Most Important*/
}
</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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download