Creating a “sticky” fixed-position item that works on iOS Safari

Question

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?

Answer 1

Answering my own question. iOS7 now support position:sticky Demo: http://html5-demos.appspot.com/static/css/sticky.html

Answer 2

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.

Answer 3

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.

Answer 4

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!

Answer 5

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.