The jQuery Mobile framework provides three different ways in which we can position our bars, each of which proves useful in certain situations: fixed positioning (convenience of static toolbars without the drawbacks of implementing faux-scrolling); fullscreen positioning (toolbars hidden to maximize the viewport); and a persistent footer option.
We can apply fixed positioning to header or footer toolbars by adding a data-position="fixed"
attribute to the element:
<div data-role="header" data-position="fixed"> <h1>Fixed header</h1> </div>
Fixed positioning lets the page content flow naturally, allowing us to take advantage of native scrolling instead of a scripting a faux-scrolling workaround. The header and footer divs are right in the flow of the document, but whenever they are out of view, you can tap the screen to make them appear. Tapping again or scrolling the page will cause them to reappear in the flow of the page (at the top...