Creating fixed and fullscreen headers and footers

In the previous discussion about headers and footers, you saw a few examples on how buttons can be added. These buttons could be useful to navigate in your website. But what if a particular page is somewhat long? A blog entry, for example, could be quite long, especially when viewed on a mobile device. As the user scrolls, the header or footer could be offscreen. jQuery Mobile provides a way to create fixed position headers and footers.

With this feature enabled, the header and footer will always be visible. In a page with long content, the user can scroll up and down, but the headers and footers will remain in their proper positions. This only works with mobile browsers that support the fixed value for the CSS position property. For browsers that do not support this feature, the headers and footers will act normally. This feature can be enabled by adding data-position="fixed" to the div tag used for either the header or the footer...