Question

JQuery Mobile为粘性页脚导航栏提供了两种选择。 “内联”，它只是放在声明的页面和“固定”，如果你不滚动它将使它变得粘。滚动后，它会消失。我发现这种行为非常脆弱。

显然，可汗学院已经弄明白了，但出于某种原因，我实际上无法使用openapp mkt访问他们的移动网站： http://www.jqmgallery.com/2011/03/07/khan-academy/

我知道其他人已经问过这个，但jQuery Mobile现在不同了： jQuery Mobile: Stick footer to bottom of page

稍后我可能会尝试搞乱布局CSS（我试图避免这样做以免破坏jquery移动） http://ryanfait.com/sticky-footer/

Answer 1

对于IOS5设备，这是有效的：http://jquerymobile.com/test/docs/config/touchOverflow.html 使用此修复程序：https://github.com/jquery/jquery-mobile/pull/3165

Answer 2

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

在支持CSS位置的浏览器中：固定（大多数桌面浏览器，iOS5 +，Android 2.2 +，BlackBerry 6等），使用“fixedtoolbar”插件的工具栏将固定在视口的顶部或底部，而页面内容在两者之间自由滚动。在不支持固定定位的浏览器中，工具栏将保持位于页面顶部或底部的流程中。

要在页眉或页脚上启用此行为，请将data-position =“fixed”属性添加到jQuery Mobile页眉或页脚元素。

固定标头标记示例：

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

固定页脚标记示例：

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

Answer 3

这不是一个固定的位置页脚。如果页面内容高于屏幕，则页脚将在屏幕外。我认为这样看起来更好。

身体和.ui-page min-height和height是防止页脚在过渡期间上下跳跃所必需的。

使用截至目前的最新JQM版本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;
}

JQuery移动底部导航栏又名粘性页脚

3 个答案: