javascript - 创建适用于 iOS Safari 的“粘性”固定位置项

Question

在 iOS Safari 上，单指平移不会生成任何事件，直到用户停止平移。仅当页面停止移动和重绘时才会生成 onscroll 事件。

我需要一种检测实时滚动的方法。具体来说，我想制作一个也适用于 iOS safari 的粘性菜单。在非移动浏览器上，可以通过在监听 onscroll 事件时在元素上的“相对位置”和“固定位置”之间切换来完成粘性菜单。此方法不适用于移动浏览器，因为不会连续触发 onscroll 事件。我能做些什么？

score 11 · Accepted Answer

回答我自己的问题。iOS7 现在支持 position:sticky 演示：http ://html5-demos.appspot.com/static/css/sticky.html

score 3 · Accepted Answer

我最近花了很多时间试图为同一问题提出一个实用的解决方案。没有正确的方法可以做到这一点，尽管有一些不错的技巧（其中大部分已经提到过）。问题是 JavaScript 在用户滚动时暂停。当您考虑其含义时，这是有道理的，但它使实现固定定位元素变得非常困难。

我能找到的最好的东西是谷歌员工的这篇精彩的帖子。您可以在移动 safari 中查看http://gmail.com以查看它的实际效果。

希望这可以帮助。

score 2 · Accepted Answer

我遇到了类似的问题，并且使用 jquery 将处理程序绑定到 touchstart/touchmove/touchend 来检测单指滚动，并且效果很好。在我的情况下，我需要移动另一个元素与尝试移动另一个元素的量相同，并且它在尝试滚动时很好地更新，因此它应该适合您的要求。

score 0 · Accepted Answer

如果你想要的只是一个粘性菜单，你可以通过使用现有的库来省去一些麻烦。我在 iScroll 上取得了成功：

至少，您可以看看它是如何工作的，并以此为基础您的解决方案。

快乐黑客！

score -3 · Accepted Answer

肯定是老话题，但我可以在这里看到很多访问。如果你想要的只是一个粘性菜单，你可以使用固定定位。那里不需要 iScroll。

5 回答 5