jQuery的移动底部导航栏又名粘页脚 [英] JQuery mobile bottom navbar aka sticky footer

问题描述

JQuery Mobile为粘性页脚导航栏提供了两种选择. "Inline"将仅放置在其声明的页面中，"Fixed"将在不滚动时使其发粘.一旦滚动，它就会消失.我发现这种行为非常不稳定.

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.

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

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/

我知道其他人也曾问过这个问题，但jQuery Mobile现在有所不同: jQuery Mobile:将页脚放在页面底部

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

稍后，我可能会尝试将CS​​S布局弄乱(我试图避免这种布局，以免破坏jquery mobile) http://ryanfait.com/sticky-footer/

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/

推荐答案

在支持CSS位置的浏览器中:固定的(大多数台式机浏览器，iOS5 +，Android 2.2 +，BlackBerry 6等)，使用"fixedtoolbar"插件的工具栏将固定在视口的顶部或底部，而页面内容在两者之间自由滚动.在不支持固定位置的浏览器中，工具栏将保持在页面顶部或底部的流中位置.

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.

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

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

固定的标题标记示例:

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

固定的页脚标记示例:

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

这篇关于jQuery的移动底部导航栏又名粘页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！