So I've been banging my head against the wall for a while now. I am developing an app using Phonegap and jQuery Mobile, and one of the pages involves a list that takes up most of the page. At the bottom of the page I have a navbar. Sometimes, but not always, when I scroll, the navbar moves with the scroll and does not stay at the bottom of the page. Also, every now and then when I click on the navbar it jumps up the top of the page where it first appeared before the scroll. I am using cordova 2.4, JQM 1.2, and Android 4.0.3. This problem does not appear when I test on my iOS device.
Here is the html (there is nothing in the list because it is filled dynamically when the user enters the room):
<div class="body profile" data-role="page" id="patientprofile" data-theme="a"><!-- this serves as the template for a patient profile page -->
<!-- patient's name displayed here -->
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1 id=patientnamespace>Name</h1>
</div><!-- /header -->
<div data-role="content">
<ul id="patientstatuslist" style="padding-bottom:35px"><!-- this list contains the patient's status updates; by default empty -->
</ul>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-theme="a"><!-- navbar that handles transitions to other pages -->
<div data-role="navbar">
<ul>
<li><a href="#patientlist" id="listbutton">List</a></li><!-- goes to the patient list screen -->
<li><a href="#newmessagedialog" data-rel="dialog" data-transition="pop">Message</a></li><!-- opens the new message dialog -->
<li><a href="#profilesettings">Profile</a></li><!-- goes to profile settings screen -->
<li><a href="#notificationsettings">Alert</a></li><!-- goes to notification settings screen -->
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
