Search code examples
jquery-mobilescrolljquery-mobile-listview

jQuery mobile fixed header on PhoneGap

I'm writing an application on Phonegap with jQuery mobile
. I have a fixied header and a very long list inside a listview:

<body onload="onBodyLoad()">
        <div data-role="page" data-theme="c" id="app">  
            <!-- Header -->
            <div data-role="header" data-position="fixed" data-theme="b">
                <h2>header</h2>
            </div>

            <!-- page conent -->
            <div data-role="content" data-theme="d">
                <ul id="list" data-role="listview">
                    <!-- the list is created dynamically -->
                </ul>
            </div> 
        </div> 
    </body>

The header will contain some action buttons.
I want to keep the header fixed when I scroll and I have some strange behaviors on different devices. How can I solve the fixed position issues?

Solution

  • i used iscroll see http://cubiq.org/dropbox/iscroll4/examples/simple/ but i works just fine... if you don't like to use iscroll use fixed toolbar in jquery mobile http://jquerymobile.com/demos/1.2.1/docs/toolbars/bars-fixed.html