有关Google教程的问题：“实施固定位置iOS Web应用程序”

Question

所有

我正在开发一个使用固定位置标头的iOS网络应用程序（很像Gmail的移动界面）。

由于移动浏览器会忽略position:fixed，因此这有点棘手。

然后，我发现了Google关于如何为移动版Gmail实施该文章的优秀文章：

http://code.google.com/mobile/articles/webapp_fixed_ui.html

唯一的问题 - 他们遗漏了几个关键代码（作为“读者练习”）。我不知道他们是这样做是为了保护他们自己的代码，还是只是为了让教程简短。

无论如何，我已经能够填补大部分，但不是所有缺失的部分。我坚持的部分......如果动量使可滚动区域超过可滚动框架的边界，该怎么办。

以下是文章的建议：

  

在我们的实现中，我们检测到这种情况并通过排队几个转换来处理它。第一次过渡将我们带到边界，这里最终速度不为零，因此我们需要一个不同的立方贝塞尔定时函数。   第二个过渡点稍微超过边界，最终速度为零，因此我们可以使用上面显示的三次贝塞尔定时函数。   第三个转换使用内置缓出计时功能将内容减速回边界。

这是有道理的，但有一些我无法弄清楚的事情......

1. 如何使用定时函数指定webkit转换，其中最终速度不为零？换句话说，当您使用cubic-bezier作为计时函数时，您只能指定中间的两个控制点 - 假设为fisrt（0,0）和last（1,1）。那么，最终速度是不是总是为零？

2. 如何计算到达边界时的速度应该是多少？

如果有人弄清楚了这个细节，并愿意分享它 - 那将非常感激！

Answer 1

对于＃2，正在处理

  

v _f ² =   v _i ² + 2 * a * d

边界处的速度为：

  

var velocityAtBoundary =（Math.sqrt（Math.pow（velocity，2）+（2 * acceleration * distanceToBoundary）））*（（velocity＆gt; 0）？1：-1）;

看起来你已经拥有了速度和加速度。一旦你弄明白到边界的距离，你就会好起来。

你有没有想出＃1？

Answer 2

如谣言网站所示，iOS5的漏洞已经表明将不再需要解决方法。位置：固定只是工作。

Answer 3

您可以使用position: -webkit-sticky;。我最近发现我可以使用它并且它已经精彩。 （iOS版本6+，顺便说一句）