带有 HTML5 网络应用程序的 iphone 的持久导航页脚答案

【问题标题】：Persistent nav footer for the iphone with a HTML5 web app带有 HTML5 网络应用程序的 iphone 的持久导航页脚
【发布时间】：2011-06-27 00:59:11
【问题描述】：

是否可以为 iphone 提供一个持久的导航页脚和一个 HTML5 网络应用程序，而不是像 jQuery 移动这样的错误实现？

即使您在 iPhone 中打开 jQuery 移动文档 (http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html)，它也不会保持原样！它有一种“弹跳”的效果，在页面转换时会瞬间跳跃

【问题讨论】：

不，这是不可能的，因为 iOS Safari 不支持 CSS "position:fixed" 属性，并且不允许 Javascript 在用户滚动时更新页面。有消息称 iOS 5 即将推出“position:fixed”。

标签： jquery html mobile jquery-mobile

【解决方案1】：

在 iOS 上打开 Gmail 网络应用（以 html 制作）。（https://mail.google.com/mail/mu）顶部栏保持在顶部没有任何闪烁，因此可以通过某些方式完成... 但是在 Chrome 上打开相同的页面时，顶部栏会滚动，所以这应该通过一些 iOS 特定的技巧来实现。

我会试着找出答案。

【讨论】：

【解决方案2】：

我刚刚检查了 Sencha Touch，他们的“底部标签”看起来非常好——必须有一种方法使用 CSS 和 JS 来实现这种效果。在浏览器中检查他们的厨房水槽，看起来他们将底部标签容器设置为 position:absolute。然后他们为窗口加载和窗口调整大小事件设置适当的 css top 属性。看起来很简单，为什么 jQUery 移动版会在这个功能上苦苦挣扎？

【讨论】：

【解决方案3】：

从 iOS 5 开始，一个版本很容易：

.header{
position: fixed;
top:0px;
z-index:1000;
...
}

注意：当您向下滚动时，这将使标题永远保持在屏幕顶部，但是当您向上滚动时，标题将被拉下并在您到达顶部时显示 url 栏。因此，它与 gmail 或 twitter 应用程序并不完全一样，但它是一个很好的开始，只需要很少的编码。

【讨论】：

【解决方案4】：

如果您坚持使用比我上一个答案允许的更持久隐藏的网址（并且页脚没有更少的反弹），请查看https://github.com/joelambert/ScrollFix/issues/2

需要一些空的嵌套 div，但不需要外部 js，只需要花哨的 css！

【讨论】：

【解决方案5】：

我认为在 iOS5 中这应该不是问题，因为静态 CSS 定位终于启用了。我知道在 iOS4 中它涉及到很多 JS 诡计...

【讨论】：