Position fixed not working in mobile browser

Question

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>

Answering your own question is OK but please do it correctly. Make that a clear question with a description of the problem and no introduction (instead of the opposite). — Denys Séguret, Oct 08 '13 at 17:17
Hi @Vicky. I suspect your question attracted down votes because of the "chatty" way in which you phrased it - initially, it read like a blog post rather than as a question. Posting and then answering your own questions is absolutely encouraged (http://meta.stackexchange.com/questions/17463/can-i-answer-my-own-questions-even-if-i-knew-the-answer-before-asking) - just take care to style your question as, well, a question and then post an answer rather than writing a blog-style post in the question field. Hope this is helpful! — razlebe, Nov 15 '13 at 13:45

score 40 · Accepted Answer · edited Jul 13 '16 at 04:54

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>

What does backface-visibility have to do with a fixed position? — Justin Self, Apr 09 '14 at 15:01
@justnS, Refer [this](http://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/)... — Rayon, Jul 01 '15 at 04:49

score -4 · Answer 2 · edited Nov 15 '13 at 13:55

-4

If it's only in a mobile browser and you don't need backwards compatibility for iOS and blackberry you would want to use a media query.

@media only screen and (max-device-width : 730px) {
    .fixed {
        position:fixed;
        top:0;
        left:0;
    }
}

edited Nov 15 '13 at 13:55

razlebe

7,134
6
42
57

answered Oct 08 '13 at 17:57

David Helgeson

43
3

score -4 · Answer 3 · answered Jul 03 '14 at 10:56

you can also using position:absolute to make header fixed try IT..

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Web App Template</title>
    <style type="text/css" media="all">
        body,ul,li {padding:0;margin:0;border:0;}
        body {font-family:helvetica;}
        header{background-color:#deb500;position:absolute;z-index:2;top:0; left:0;width:100%;height:45px;padding:0;}
        footer {background-color:#c27b00;position:absolute;z-index:2;bottom:0; left:0;width:100%;height:48px;padding:0;border-top:1px solid #444;}
        header, footer{font-size:20px;text-align:center;color:#f3f3f3;font-weight:bold;text-shadow:0 -1px 0 rgba(0,0,0,0.5);line-height:45px;}
        #wrapper {position:absolute;z-index:1;top:45px; bottom:48px; left:0;width:100%;background:#aaa;overflow:auto;}
        #scroll-content {position:absolute;z-index:1;width:100%;padding:0;}
        ul {list-style:none;padding:0;margin:0;width:100%;text-align:left;}
        li {padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #ccc;border-top:1px solid #fff;background-color:#fafafa;font-size:14px;}
    </style>
</head>
<body>
    <header>Web App Template</header>
    <div id="wrapper">
        <div id="scroll-content">
            <ul>
                <li>Some Stuff</li>
                <li>More Stuff</li>
                <li>Big Stuff</li>
                <li>Small Stuff</li>
                <li>Geek Stuff</li>
                <li>Nerd Stuff</li>
                <li>Fast Stuff</li>
                <li>Slow Stuff</li>
                <li>Good Stuff</li>
                <li>Bad Stuff</li>
                <li>Your Stuff</li>
                <li>My Stuff</li>
                <li>Their Stuff</li>
                <li>Our Stuff</li>
                <li>Super Stuff</li>
                <li>Uber Stuff</li>
                <li>Stuff Stuff</li>
                <li>French Stuff</li>
                <li>German Stuff</li>
                <li>English Stuff</li>
                <li>American Stuff</li>
                <li>Stuff</li>
            </ul>
        </div>   
    </div>
    <footer>Some Footer Content</footer>

Absolute positioning is not the same as position fixed, and only "appears" that way until you scroll, and then the header will disappear. As a result, this response does not address the op's concerns and requirements. — Oddman, Jan 01 '16 at 23:34

Position fixed not working in mobile browser

3 Answers3

Linked