# Fixed toolbars

Home Search

## Fixed toolbars

- Basics
- Options
- Methods
- Events

In browsers that support CSS `position: fixed`, (generally, most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and more), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will fall back to static, inline positiong in the page.

To enable this behavior on a header or footer, add the `data-position="fixed"` attribute to a jQuery Mobile header or footer element.

Fixed header markup example:

    <div data-role="header" data-position="fixed">
    	<h1>Fixed Header!</h1>
    </div>

Fixed footer markup example:

    <div data-role="footer" data-position="fixed">
    	<h1>Fixed Footer!</h1>
    </div>

## Forms in toolbars

In jQuery Mobile 1.1, all form element are now tested to work correctly in toolbars and a more compact mini sized version is recommended for use in toolbars. The following pages are designed to test fixed toolbars and form elements: demo app, text inputs, search inputs, radio toggles, checkbox toggles, slider, select, and buttons.

Note that the interaction of fixed toolbars and the on-screen keyboard used on many mobile platforms can cause issues when these interact so we recommend avoiding the use of text inputs or other elements that open the keyboard in footers.

## Fullscreen Toolbars

Fullscreen fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled, instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions. This page demonstrates toolbars that use the fullscreen option.

To enable this option on a fixed header or footer, add the `data-fullscreen` attribute to the element.

    <div data-role="header" data-position="fixed" data-fullscreen="true">
    	<h1>Fixed Header!</h1>
    </div>

## Changes in jQuery Mobile 1.1

Prior to version 1.1, jQuery Mobile used dynamically re-positioned toolbars for the fixed header effect because very few mobile browsers supported the `position:fixed` CSS property, and simulating fixed support through the use of "fake" JavaScript overflow-scrolling behavior would have reduced our browser support reach, in addition to feeling unnatural on certain platforms. This behavior was not ideal, and jQuery Mobile 1.1 took a new approach to fixed toolbars that allows much broader support, and now the framework offers true fixed toolbars on many popular platforms, while gracefully degrading non-supporting platforms to static positioning.

## No longer supported: touchOverflowEnabled

Prior to jQuery Mobile 1.1, true fixed toolbar support was contingent on native browser support for the CSS property `overflow-scrolling: touch`, which is currently only supported in iOS5. As of version 1.1, jQuery Mobile no longer uses this CSS property at all. We've removed all internal usage of this property in the framework, but we've left it defined globally on the $.mobile object to reduce the risk that its removal will cause trouble with existing applications. This property is flagged for removal, so please update your code to no longer use it. The support test for this property, however, remains defined under `$.support` and we have no plans to remove that test at this time.

## The rest of the page is just sample content to make the page very long

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, `commodo vitae`, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, `commodo vitae`, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

### And an inset list

- Inbox 12
- Outbox 0
- Drafts 4
- Sent 328
- Trash 62

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, `commodo vitae`, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, `commodo vitae`, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

### Embedded form

Text Input:
Textarea:
Flip switch:
Slider:
Choose shipping method:

### A bit more text

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, `commodo vitae`, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

### More in this section

- Toolbars
- Toolbar basics
- Header bars
- Footer bars
- Navbars
- Fixed positioning
- Persistent toolbars
- Theming toolbars