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.

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

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 4

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.

Answer 5

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.