Menu
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?
830
CSS position:fixed is Fully Supported on Safari 15, which means that any user who'd be accessing your page through Safari 15 can see it perfectly.
Position Sticky is supported by all major modern browsers, except for old IE. For Safari browsers you will need to add the -webkit prefix.
That can happen for many reasons: Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element. Position sticky may not work correctly if any parent element has a set height. Many browsers still do not support sticky positioning.
position: sticky is a new way to position elements and is conceptually similar to position: fixed . The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.
Answering my own question. iOS7 now support position:sticky Demo: http://html5-demos.appspot.com/static/css/sticky.html
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
