Question

JQuery移动页脚未正确固定到屏幕底部。在正常行为中，他们跟随底部滞后。在大多数情况下，它仍然非常多（它没有显示在屏幕的底部）。

我的问题是为什么会这样？

考虑到：

解决方案似乎对现代浏览器和CSS非常有效（位置：绝对，底部：0px）。我猜有些导航员不支持这个吗？哪个？为什么呢是什么？
Sencha touch似乎在页脚的情况下提供了更好的选择。但秘诀是什么？它与所有浏览器兼容吗？
在这个问题出现时，Jquery在.rc1。它可能不会在JQuery mobile 1.0版本中修复。（jQuery Mobile and a fixed footer）

Answer 1

从发行说明：

http://jquerymobile.com/blog/

iOS5：显着改进了页面过渡和真正的固定工具栏

该团队花费了大量时间努力改进   转换和固定工具栏，因为我们知道这些很重要   开发人员的功能。花了几百个小时后工作   精益求精，我们现在相信实质性的道路，   这些领域的跨平台改进只能在移动时发生   平台本身开始支持溢出属性。   基于JavaScript的动量滚动脚本太重，没有响应   和狭隘的兼容，成为一种前进的方式。

这就是为什么我们对iOS5的upcoming support感到非常兴奋   触摸目标版本的溢出：自动，并适当支持   position：fixed，允许内部滚动区域   原生动力滚动CSS。在Beta 3中，我们添加了一个   增强层将利用这些新的CSS功能   使我们能够带来真正“固定”的工具栏和超级流畅的工具栏   iOS5中的过渡，都是通过使用Web标准而非常少   附加代码。

Answer 2

您可以使用一些JavaScript可滚动内容插件来创建一个不吸引人的固定页脚：

iScroll - ＆gt; http://cubiq.org/iscroll-4
ScrollView - ＆gt; http://jquerymobile.com/test/experiments/scrollview/
Flexcroll - ＆gt; http://www.hesido.com/web.php?page=customscrollbar

我确信还有更多，但这三个我已经取得了一些成功。我已经决定亲自使用iScroll了。

要获得一个不错的固定页脚，您可以将标题设置为position: absolute和top: 0，将页脚设置为position: absolute和bottom: 0，然后将内容区域设置为position: absolute，top: <bottom of header>和bottom: <top of footer>。

我发现的一个问题是将文档设置为100％高度将不允许地址栏滚动到视图之外。要解决此问题，当load事件在window对象上触发时，我将文档的高度设置为比屏幕高度（window.innerHeight）多100px。然后我滚动到页面顶部（$.mobile.silentScroll(0)），并设置超时以将文档的高度重置为100％。

$(window).bind('load', function () {
    $.mobile.activePage.css({
        height       : (window.innerHeight + 100) + 'px',
        'min-height' : (window.innerHeight + 100) + 'px'
    }).find('[data-role="footer"]').css({
        bottom : '100px'
    });
    $.mobile.silentScroll(0);
    setTimeout(function () {
        $.mobile.activePage.css({
            height       : '100%',
            'min-height' : '100%'
        }).find('[data-role="footer"]').css({
            bottom : '0px'
        });
        if ($.mobile.activePage[0].id in myScroll) {
            myScroll[$.mobile.activePage[0].id].refresh();
        }
    }, 750);
});

上面的例子：

将当前伪页面的高度更改为比屏幕高度高100px。
更改页脚的位置，使其在整个过程中保持可见状态。
滚动到页面顶部（即将地址栏滚动到视图之外）。
设置超时以将当前伪页面的大小重新调整为100％高度并重置页脚的位置。超时是必要的，因此可以在高度重置为100％之前进行滚动。
我在此代码中使用了iScroll并将每个iScroll实例保存在一个数组中，这样每当我对影响可滚动区域大小的DOM进行更改时，我就可以刷新iScroll内容区域。

每当方向发生变化时，我也会在窗口对象上触发加载事件：

$(window).bind('orientationchange', function () {
    $(window).trigger('load');
});

Answer 3

我正在使用Jquery.Mobile 1.2alpha，似乎不再是一个问题了。 data-position-'fixed'效果很好

<footer data-role="footer" data-position="fixed">
<div data-role="navbar">
    <ul>
        <li><a href="#" onclick="$.mobile.changePage('/url/1');">Url 1</a></li>
        <li><a href="#" onclick="$.mobile.changePage('/url/2');">Url 2</a></li>
        <li><a href="#" onclick="$.mobile.changePage('/url/3');">Url 3</a></li>
        <li><a href="#" onclick="$.mobile.changePage('/url/4');">Url 4</a></li>
    </ul>
</div>
</footer>

如果您正在为包装应用开发，请禁用“webview跳出”的其他建议。 http://community.phonegap.com/nitobi/topics/uiwebview_bounce

Answer 4

固定页脚解决方案对我有用：

<div data-role="footer" data-position="fixed" style="position: absolute">

为什么JQuery移动固定页脚如此糟糕？

4 个答案: