18

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?

Tom Auger
  • 19,421
  • 22
  • 81
  • 104
woran
  • 1,317
  • 2
  • 16
  • 22
  • One (albeit hacker-ish) way to implement it might be to make your own vertical Pan gesture recognized and add it to the web view. That way you could use the -state property to receive events. – CodaFi Nov 13 '11 at 02:06
  • 2
    bind to touch move and monitor the y of the page – sciritai Dec 13 '11 at 20:09

5 Answers5

10

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

woran
  • 1,317
  • 2
  • 16
  • 22
3

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.

mikekavouras
  • 220
  • 2
  • 8
  • 1
    That link redirects to the Developers homepage. The best I could find was via archive.org: https://web.archive.org/web/20141001100814/https://developers.google.com/mobile/articles/webapp_fixed_ui – duncan Jul 08 '16 at 08:28
2

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.

Chris A
  • 368
  • 1
  • 8
0

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!

Dan M
  • 1,765
  • 1
  • 11
  • 17
-3

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.

curly_brackets
  • 5,491
  • 15
  • 58
  • 102
  • It should be pointed out that fixed positioning is not supported well in many mobile browsers. More here: http://bradfrostweb.com/blog/mobile/fixed-position/ – Jonathan Stark Mar 24 '13 at 15:50
  • 1
    It should be pointed out that the person asking the question, just found a solution with far less support than my solution... and I disagree with your statement about support for position:fixed: http://caniuse.com/css-fixed – curly_brackets Oct 16 '13 at 10:32
  • 1
    What's to disagree with? "Partial support in iOS Safari refers to buggy behavior." So is buggy behaviour in ~50% of mobile browsers acceptable to you? – theflowersoftime Dec 16 '13 at 22:28