iOS7中position:fixed;效果不佳

Question

我知道iScroll和jQuery Mobile，并且我已经长时间使用了jQuery Mobile，我知道它们都解决了这个问题，但我想自己解决，而不是为此包含一个大型框架。 我的问题是，jQuery Mobile如何在iOS设备上解决了position:fixed;问题？目前，所有我的固定位置元素仅在滚动完成后才会改变位置，但它应该始终在顶部固定出现，而不仅仅出现在滚动结束时。

- user3292653

Answer 1

我遇到了同样的问题。我有一个固定在body上面的元素，这个元素很不稳定。对于我而言，使用height:auto;代替height:100%可以解决这个问题。 完整代码：

body,
html{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto; /* iOS position:fixed; elements fix (not 100%) */
    min-height:100%;
    overflow-x:hidden;
}

- dude

---

我来补充一下...我花了太多时间解决这个问题，发现你必须滚动窗口。也就是说，WINDOW对象。如果其他任何东西在滚动，你会遇到问题。 - Timothy Owen

Answer 2

position:fixed 在 iOS 7 上表现得非常好，实际上（有一些小问题，例如根据某些因素可能会出现抖动），所以我认为你可能正在尝试模仿粘性滚动（当滚动到某个 y 偏移量时，元素固定）。

不幸的是，在 iOS 上你不能轻松地实现这一点（当你滚动或轻扫时，所有 JavaScript 都会停止，这就是为什么 position:fixed 在事件结束时发生。如果你很幸运，你可以希望用户拖动并在 touchmove 上使用 position: fixed...）

正如你所提到的，有一些解决办法，比如应用 overflow 并模仿本机滚动（例如 iScroll）。这些都可以工作，但它们需要占用大量内存（多亏了硬件加速平滑滚动），因此性能可能会成为一个问题，具体取决于你的需求。

对于 iOS 7，有一个值叫做 position，它是 sticky。这非常有效，如下面所示：

http://html5-demos.appspot.com/static/css/sticky.html
http://caniuse.com/css-sticky

唯一的缺点是它只限于 iOS 6.1 和 7。然而，如果较旧的设备不是一个问题，position:sticky 是一个很好的解决方案，因为它是本地解决方案。

- Jack

---

嗨，我找到了问题，但现在还没有解决方案。问题是，如果您将具有“position:fixed;”的<div>定位在具有“height:100%;overflow:auto”的body内部，则会出现错误。修复方法是使用“height:auto”。但我无法解决的一个问题是，如果您将position:fixed;元素放置在与另一个具有position:absolute的元素相同的层上。 - user3292653

Answer 3

尝试使用内部滚动（overflow-y: scroll）制作块，并将它们像内联块一样放置在彼此附近。这样，您将获得独立的可滚动内容。

- Vlad