Javascript 创建一个适用于 iOS Safari 的“粘性”固定位置项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8107722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a "sticky" fixed-position item that works on iOS Safari
提问by woran
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.
在 iOS Safari 中，单指平移不会生成任何事件，直到用户停止平移。只有当页面停止移动和重绘时才会生成 onscroll 事件。
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?
我需要一种检测实时滚动的方法。具体来说，我想制作一个也适用于 iOS Safari 的粘性菜单。在非移动浏览器上，可以通过在侦听 onscroll 事件的同时在元素上的“相对位置”和“固定位置”之间切换来完成粘性菜单。此方法不适用于移动浏览器，因为不会连续触发 onscroll 事件。我能做什么？
采纳答案by woran
Answering my own question. iOS7 now support position:sticky Demo: http://html5-demos.appspot.com/static/css/sticky.html
回答我自己的问题。iOS7 现在支持 position:sticky 演示：http://html5-demos.appspot.com/static/css/sticky.html
回答by mikekavouras
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.
我最近花了很多时间试图为同样的问题想出一个实用的解决方案。没有正确的方法可以做到这一点，尽管有一些不错的技巧（其中大部分已经提到）。问题是 JavaScript 在用户滚动时暂停。当您考虑其含义时，这是有道理的，但它使实现固定定位元素变得非常困难。
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.comin mobile safari to see it in action.
我能找到的最好的东西是谷歌人的这篇精彩帖子。您可以在移动 safari 中查看http://gmail.com以查看它的运行情况。
https://developers.google.com/mobile/articles/webapp_fixed_ui
https://developers.google.com/mobile/articles/webapp_fixed_ui
Hope this helps.
希望这可以帮助。
回答by Chris A
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.
我有一个类似的问题，并且使用 jquery 将处理程序绑定到 touchstart/touchmove/touchend 来检测单指滚动，并且它工作得很好。在我的情况下，我需要移动另一个元素与另一个元素的尝试移动相同的数量，并且它在尝试滚动时很好地更新，因此它应该适合您的要求。
回答by Dan M
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:
如果你想要的只是一个粘性菜单，你可以通过使用现有的库来避免一些麻烦。我在 iScroll 上取得了成功：
At the very least, you can take a look at how this works and base your solution around that.
至少，您可以看看它是如何工作的，并以此为基础制定您的解决方案。
Happy hacking!
快乐黑客！
回答by curly_brackets
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.
老话题肯定，但我可以在这里看到很多访问。如果你想要的只是一个粘性菜单，你可以使用固定定位。那里不需要 iScroll。
