jQuery Mobile:为什么固定的页眉/页脚不是真正的CSS固定? [英] jQuery mobile: why fixed header/footer are not really css fixed?

问题描述

jQuery mobile:我可以将标题/页脚真正固定为css(例如css position:fixed)吗?

jQuery mobile: can I do header/footer really css fixed (like css position:fixed)?

要修复页眉和页脚，我尝试使用jquery-mobile的data-position ="fixed"

To fix header and footer i tried to use jquery-mobile's data-position="fixed"

但是在电话上看起来很丑陋:当我滚动时，它出现，消失并闪烁，嗯.如果将标头样式设置为: style ="position: fixed; z-index:1000"看起来好多了-只是固定而已

But it looks like ugly on the phone: when I scroll, it appears, disappears and blinks, hm.. that is not what fixed mean to be in css if set header style to: style="position:fixed;z-index:1000" it looks much better - it just fixed and that is all

有没有一种现成的方法?

Is there a way to do it out of the box?

推荐答案

所有问题，为什么会发生以及如何解决:

All your questions why this happens and how to fix it: http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

用于存档:

已知限制

jQuery Mobile使用动态重新定位的工具栏来实现固定标题效果，因为很少有移动浏览器支持position:fixed CSS属性

jQuery Mobile uses dynamically re-positioned toolbars for the fixed header effect because very few mobile browsers support the position:fixed CSS property

正确的固定工具栏:touchOverflowEnabled

为了获得真正的固定工具栏，浏览器需要支持position:fixed或overflow:auto.幸运的是，移动平台已经开始支持此功能，因此我们可以使用Web标准来实现此目的.在jQuery Mobile中，我们添加了一个名为touchOverflowEnabled的全局功能，该功能在受支持的平台(如iOS5)上利用了overflow:auto CSS属性.启用后，该框架会通过内部滚动将每个页面包装在一个容器中

In order to achieve true fixed toolbars, a browser needs to either support position:fixed or overflow:auto. Fortunately, this support is coming to mobile platforms so we can achieve this with web standards. In jQuery Mobile, we have added a global feature called touchOverflowEnabled that leverages the overflow:auto CSS property on supported platforms like iOS5. When enabled, the framework wraps each page in a container with it's own internal scrolling

这篇关于jQuery Mobile:为什么固定的页眉/页脚不是真正的CSS固定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！