position:fixed
on iOS 7 works pretty well, actually (there are minor issues, for instance juddering might be an issue depending on certain factors) so I think maybe you're trying to mimic a sticky scroll (where an element fixes when scrolling to a certain y-offset).
Unfortunately, for iOS you can't do this easily (when you scroll, or flick, all JavaScript is halted, which is why position:fixed
happens at the end of the event. If you're lucky, you could hope the user pans and position:fixed on touchmove...)
As you mentioned, there are workarounds where you apply overflow and mimic native scroll (iScroll, for instance). These work, but they're memory intensive (thank you, hardware acceleration for smooth scrolling) so performance could be an issue depending on your need.
For iOS 7, there's a value for position
, which is sticky
. This works really well, as demonstrated here:
http://html5-demos.appspot.com/static/css/sticky.html
http://caniuse.com/css-sticky
The only drawback is that it's limited to iOS 6.1 and 7. However, if older devices are not a concern, position:sticky
is a great workaround since it's native solution.