所有
我正在开发一个使用固定位置标头的iOS网络应用程序(很像Gmail的移动界面)。
由于移动浏览器会忽略position:fixed
,因此这有点棘手。
然后,我发现了Google关于如何为移动版Gmail实施该文章的优秀文章:
http://code.google.com/mobile/articles/webapp_fixed_ui.html
唯一的问题 - 他们遗漏了几个关键代码(作为“读者练习”)。我不知道他们是这样做是为了保护他们自己的代码,还是只是为了让教程简短。
无论如何,我已经能够填补大部分,但不是所有缺失的部分。我坚持的部分......如果动量使可滚动区域超过可滚动框架的边界,该怎么办。
以下是文章的建议:
在我们的实现中,我们检测到这种情况并通过排队几个转换来处理它。第一次过渡将我们带到边界,这里最终速度不为零,因此我们需要一个不同的立方贝塞尔定时函数。 第二个过渡点稍微超过边界,最终速度为零,因此我们可以使用上面显示的三次贝塞尔定时函数。 第三个转换使用内置缓出计时功能将内容减速回边界。
这是有道理的,但有一些我无法弄清楚的事情......
如何使用定时函数指定webkit转换,其中最终速度不为零?换句话说,当您使用cubic-bezier作为计时函数时,您只能指定中间的两个控制点 - 假设为fisrt(0,0)和last(1,1)。那么,最终速度是不是总是为零?
如何计算到达边界时的速度应该是多少?
如果有人弄清楚了这个细节,并愿意分享它 - 那将非常感激!
答案 0 :(得分:1)
对于#2,正在处理
v f 2 = v i 2 + 2 * a * d
边界处的速度为:
var velocityAtBoundary =(Math.sqrt(Math.pow(velocity,2)+(2 * acceleration * distanceToBoundary)))*((velocity> 0)?1:-1);
看起来你已经拥有了速度和加速度。一旦你弄明白到边界的距离,你就会好起来。
你有没有想出#1?
答案 1 :(得分:0)
如谣言网站所示,iOS5的漏洞已经表明将不再需要解决方法。位置:固定只是工作。
答案 2 :(得分:0)
您可以使用position: -webkit-sticky;
。我最近发现我可以使用它并且它已经精彩。 (iOS版本6+,顺便说一句)