创造“粘性”适用于 iOS Safari 的固定位置项目
在 iOS safari 上，单指平移不会生成任何事件，直到用户停止平移。仅当页面停止移动和重绘时才会生成 onscroll 事件。
我需要一种方法来检测实时滚动。具体来说，我想制作一个也适用于 iOS safari 的粘性菜单。在非移动浏览器上，可以通过在侦听 onscroll 事件时在元素上的“相对位置”和“固定位置”之间切换来完成粘性菜单。此方法不适用于移动浏览器，因为 onscroll 事件不会连续触发。我能做些什么？
On iOS safari, one-finger panning doesn’t generate any events until the user stops panning. An onscroll event is only generated when the page stops moving and redrawn.
I need a way to detect real time scrolling. Specifically, I want to make a sticky menu that will also work on iOS safari. On non-mobile browsers, sticky menu can be done by switching between "position relative" to "position fixed" on the element while listening to the onscroll events. This method won't work on mobile browser because onscroll events are not continuously fired. What can I do?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
如果您想要的只是一个粘性菜单，那么使用现有的库可以让您省去一些麻烦。我已经成功使用 iScroll：
http://cubiq.org/iscroll
至少，你可以采取看看它是如何工作的，并以此为基础构建您的解决方案。
快乐黑客！
If all you want is a sticky menu, you can save yourself some headaches by using an existing library. I've had success with iScroll:
http://cubiq.org/iscroll
At the very least, you can take a look at how this works and base your solution around that.
Happy hacking!
当然是老话题了，但我可以看到这里有很多访问。如果您想要的只是一个粘性菜单，您可以使用固定定位。那里不需要 iScroll。
Old topic for sure, but I can see alot of visits here. If all you want, is a sticky menu, you can use fixed positioning. No need for iScroll there.
回答我自己的问题。 iOS7现在支持position:sticky
演示：http://html5-demos.appspot.com/static/css/sticky.html
Answering my own question. iOS7 now support position:sticky
Demo: http://html5-demos.appspot.com/static/css/sticky.html
我最近花了很多时间试图为同一问题找到一个实用的解决方案。尽管有一些不错的技巧（其中大多数已经提到过），但没有正确的方法可以做到这一点。问题是 JavaScript 在用户滚动时暂停。当您考虑其含义时，这是有道理的，但是它使得实现固定定位元素变得非常困难。
我能找到的最好的东西是谷歌人员发表的这篇精彩的文章。您可以在 mobile safari 中查看 http://gmail.com 以查看其实际情况。
https://developers.google.com/mobile/articles/webapp_fixed_ui
希望这会有所帮助。
I've recently spent many hours trying to come up with a practical solution for the same problem. There's no right way to do this, although there are a few decent hacks (most of them mentioned already). The problem is that JavaScript is paused while the user is scrolling. It makes sense when you consider the implications, but it makes it damn hard to implement fixed positioned element.
The best thing that I've been able to find is this wonderful post by the folks at Google. You can check out http://gmail.com in mobile safari to see it in action.
https://developers.google.com/mobile/articles/webapp_fixed_ui
Hope this helps.
我遇到了类似的问题，并使用 jquery 将处理程序绑定到 touchstart/touchmove/touchend 来检测单指滚动，并且效果非常好。就我而言，我需要移动另一个元素与尝试移动另一个元素相同的量，并且在尝试滚动时它会很好地更新，因此它应该适合您的要求。
I had a similar issue and bound handlers to touchstart/touchmove/touchend using jquery to detect the single finger scrolling and it worked perfectly. In my case I needed to move another element the same amount as the attempted move of another element and it updated nicely as the scroll was attempted so it ought to be suitable for your requirement.