如何在iPhone的HTML5网页应用中实现固定的标题和幻灯片等动画(如Google Music) ?

Question

我刚刚看到http://music.google.com，这是一个html5 web应用程序。

我想知道，如何有可能修复标题?在iPhone上使用幻灯片等动画……？ 它看起来就像一个iPhone原生应用!

请帮忙好吗?

PS:没有jQuery Mobile，谢谢

Answer 1

使用此http://cubiq.org/iscroll-4。这是经过良好测试的，并在我们的许多移动应用程序中工作。你也可以试试他们的演示。http://cubiq.org/dropbox/iscroll4/examples/simple/

Answer 2

你有两个问题，但是

1. CSS声明position: fixed在ios5上被Safari支持(例如http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5)，但不支持更早版本。

   我不确定你是如何在早期版本的iOS上实现固定标题的

2. Safari支持(我认为是发明的)CSS过渡和动画。

   我相信它们利用了iOS内置的动画库，所以它们应该比通过JavaScript做同样的事情要好得多。

Answer 3

在移动网络上总结如下:你不能设置"position:fixed"，所以你必须创建一个div，你可以自己滚动内容。

1)创建headerdiv并设置位置为绝对。设置一个高度/宽度

2)创建第二个div (contentdiv)，它是高度/宽度(通常是页面的其余部分)。然后你需要做的是找到一个滚动工具。请访问https://github.com/appMobi/aUX_web了解aux_webroller。由于您正在滚动第二个div，因此标题将保持固定位置。

伊恩