什么是 jQuery Mobile 1.1.0 - 位置固定方法

Question

jQuery Mobile 1.1.0 Final 刚刚发布并承诺：

“真正的固定工具栏：轻量级、基于 CSS 且广泛兼容”

对于solve all 移动浏览器中的position:fixed 头痛问题，具体的解决方法是什么？

我有一个桌面应用程序（基于 Twitter 引导程序），它的位置：固定工具栏在移动浏览器上无法正常工作？ 我想在没有所有其他功能和 CSS jQuery Mobile 的情况下合并特定修复。

Answer 1

简单（或多或少）：

1) 浏览器嗅探生成黑名单。
2) 位置：固定为支持的浏览器
3) 位置：其余为静态

在 JQM 中查找此部分：

$.widget("mobile.fixedtoolbar", $.mobile.widget, {...}

由于目前许多移动浏览器不支持 pos:fix，因此在许多浏览器中，您最终会在内容底部看到静态工具栏！！！

还有一个polyfill 可以恢复以前的行为（隐藏-重新定位-显示）。

我只是使用这个 polyfill 的一部分来重新定位元素，然后像这样显示它们：

 el.jqmData("fixed") == "top" ? el.css( "top", $( window ).scrollTop() + "px" ) :
    el.css( "bottom", wrap.outerHeight() - $( window ).scrollTop() - $.mobile.getScreenHeight() + "px" );

如果您的工具栏/元素不必可见，这很好用，因为它从一个设定位置（滚动停止重新计算）与原始固定工具栏（JQM 1.1 之前）重新计算在滚动 (scroll-calculate-scroll-calculate)，这对设备硬件造成了太大的压力，导致工具栏卡住或跳跃。