In jQuery Mobile, there are two standard types of toolbars: Headers and Footers.
It's very common to have a horizontal navigation or tab bar inside the header and/or footer; jQuery Mobile includes a navbar widget that turns an unordered list of links into a horizontal button bar, which works well in these instances.
View the data- attribute reference to see all the possible attributes you can add to toolbars.
A "fixed" positioning mode fixes the toolbars to either the top or bottom of the viewport on browsers that support CSS fixed positioning (generally, most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and more). In browsers that don't support fixed positioning, the toolbars will fall back to static, inline positiong in the page.
When tap-toggling is enabled, tapping the screen will toggle the visibility of the fixed toolbars: tapping the page when the toolbars aren't visible brings them into view, tapping again hides them until you tap again. This gives users the option to hide the toolbars until needed to maximize screen real estate. One caveat is that fixed toolbars never truly hide, but toggle between fixed and static positioning. This means that if you're at the top of a page, you can't tap-toggle a header toolbar out of view, as it instead toggles into its spot in the document flow at the top of the page. The same goes for fixed footers when scrolled to the very bottom of a document.
To set this behavior on a header or footer, add the
data-position="fixed" attribute to the header or footer element.
A "fullscreen" position mode works just like the fixed mode except that the toolbars overlay the page content, rather than reserving a place in the document when not in fixed mode. This is useful for immersive apps like photo or video viewers where you want the content to fill the whole screen and toolbars can be hidden or summoned to appear by tapping the screen. Keep in mind that the toolbars in this mode will sit over page content so this is best used for specific situations.