JQuery移動底部導航欄又名粘性頁腳

Question

JQuery Mobile為粘性頁腳導航欄提供了兩種選擇。 “內聯”，它只是放在聲明的頁面和“固定”，如果你不滾動它將使它變得粘。 滾動后，它會消失。 我發現這種行為非常脆弱。

顯然，可汗學院已經弄明白了，但出於某種原因，我實際上無法使用openapp mkt訪問他們的移動網站： http ：//www.jqmgallery.com/2011/03/07/khan-academy/

我知道其他人已經問過這個，但jQuery Mobile現在不同了： jQuery Mobile：將頁腳粘貼到頁面底部

后來我可能會嘗試搞亂布局CSS（我試圖避免以免破壞jquery移動） http://ryanfait.com/sticky-footer/

Answer 1

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 2

對於IOS5設備，這是有效的： http ： //jquerymobile.com/test/docs/config/touchOverflow.html與此修復程序： https ： //github.com/jquery/jquery-mobile/pull/3165

Answer 3

這不是一個固定的位置頁腳。 如果頁面內容高於屏幕，則頁腳將在屏幕外。 我認為這樣看起來更好。

主體和.ui-page最小高度和高度是防止頁腳在過渡期間上下跳躍所必需的。

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