When we started experimenting with JQuery Mobile, it did not have the built-in ability to set a bar to a fixed position and scroll a list section – much like native iPhone and Android apps. Instead, the bars disappear and reappear when scrolling stops.

Although the JQuery Mobile team is working on this much requested feature for a later release of the framework, there are several things you can do now to achieve this.

Our Method

Step 1) Besides the jquery.js, jquerymobile.js and .css files, include the following 3 files in your html.

<script src="jquery.easing.1.3.js" type="text/javascript"></script>

<script src="jquery.mobile.scrollview.js" type="text/javascript"></script>

<script src="scrollview.js" type="text/javascript"></script>

Google around and you can find the up-to-date versions of these files pretty easily.

Step 2) Apply the standard header and footer divs and attributes:

<div id="home" data-role="page">...</div>

<div data-role="content"><ul data-role="listview"><li>List item 1</li></ul></div>

<div data-role="footer">...</div>

Step 3) (optional) Add the following attributes into the footer tag for a fixed position footer:

<div data-role="footer" style="position: fixed;bottom: 0px;">

Thats it! Now you have fixed position scrolling with JQuery Mobile.