JQuery mobile bottom navbar aka sticky footer

问题

JQuery Mobile offers two choices for sticky footer navbars. "Inline" which will just put in the page where ever its declared and "Fixed" which will kind of make it sticky if you don't scroll. Once you scroll it disappears. I have found this behavior to be very flaky.

Apparently the Khan academy has figured it out but for some reason I can't actually visit their mobile site with openapp mkt: http://www.jqmgallery.com/2011/03/07/khan-academy/

I know others have asked this but jQuery Mobile is now different: jQuery Mobile: Stick footer to bottom of page

Later I might just try messing with layout CSS (which I have tried to avoid so as not to break jquery mobile) http://ryanfait.com/sticky-footer/

回答1:

for IOS5 device this is working : http://jquerymobile.com/test/docs/config/touchOverflow.html with this fix : https://github.com/jquery/jquery-mobile/pull/3165

回答2:

http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html

In browsers that support CSS position: fixed (most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others), 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 remain positioned in flow, at the top or bottom of 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>

回答3:

This isn't a fixed position footer. The footer will be offscreen if the page content is taller than the screen. I think it looks better this way.

The body and .ui-page min-height and height are necessary to prevent the footer from jumping up and down during transitions.

Works with the latest JQM version as of now, 1.4.0

body,
.ui-page {
    min-height:100% !important;
    height:auto !important;
}

.ui-content {
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}

.ui-footer {
    position:absolute !important;
    width:100%;
    bottom:0;
}

来源：https://stackoverflow.com/questions/6927504/jquery-mobile-bottom-navbar-aka-sticky-footer

标签

jquery

css

mobile

jquery-mobile