title: jquery mobile fixed footer scrolls with the page
body: <p>I'm trying to implement the fixed footer on my site.</p>
  
  <p>My problem is, when I scroll the page, the footer is overlapping with the content. When scrolling is finished, it falls back to the bottom. Is this the standard behavior? </p>
  
  <p><a href="http://jquerymobile.com/demos/1.0/docs/toolbars/bars-fixed.html" rel="nofollow">I checked this link</a>. It works on desktop browser. ie. the footer remains fixed on scrolling. But on mobile(android) it scrolls with the page. Can I make it really fixed? </p>
  
  <p>EDIT:  HTML added</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div data-role="footer" data-iconpos="left"  data-id="jefooter" data-theme="b" data-position="fixed" data-tap-toggle="false"&gt;
      &lt;div data-role="navbar"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href="/welcome" data-icon="jehome" data-iconpos="notext" data-direction="reverse" data-ajax="false"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="/mobile/users/settings" id="user_auth" data-icon="jesettings" data-iconpos="notext" data-transition="fade" data-ajax="false"&gt;My Settings&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="/mobile/help" data-icon="jehelp" data-iconpos="notext" data-transition="fade" data-ajax="false"&gt;Help&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You can see the page at m.qa.hungryzone.com</p>
  
  <p>EDIT 2: </p>
  
  <p>Android version is 2.3.5</p>