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

javascript ios onscroll
woran picture woran · Nov 12, 2011 · Viewed 23.7k times · Source

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

woran picture woran · Oct 11, 2013

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

Related questions

Detect if device is iOS

I'm wondering if it's possible to detect whether a browser is running on iOS, similar to how you can feature detect with Modernizr (although this is obviously device detection rather than feature detection). Normally I would favour feature detection instead, …

Read More
How do I correctly detect orientation change using Phonegap on iOS?

I found this orientation test code below looking for JQTouch reference material. This works correctly in the iOS simulator on mobile Safari but doesn’t get handled correctly in Phonegap. My project is running into the same issue that is …

Read More
Remove attribute "checked" of checkbox

I need remove the attribute "checked" of one checkbox when errors occur. The .removeAttr function not work. Any idea? :/ HTML <div data-role="controlgroup" data-type="horizontal" data-mini="true" style="margin-left: auto; margin-right: auto; width: 100%; text-align: center;"> <input type="…

Read More