Search code examples
javascriptjquerymobilemobile-safariiscroll4

Create this effect in mobile safari?

I want to create this effect in mobile safari. http://jqueryfordesigners.com/demo/header-slide.html

I'm using iScroll 4. I want to mix iScroll with this example.

http://jsfiddle.net/tdQmQ/3/ (here is what i have so far, use the mouse to flick like a touch event)

Should headers not be in the scroll area? If any one can point me in the right direction that would be great.

The biggest problem is latching onto scroll events of iScroll, i dont know how.

Thanks

EDIT: I finally built what I was looking for, http://jsfiddle.net/tdQmQ/25 - still need to fix the z-index so headers show above the clone box though.

EDIT2: I actually ended up changing the library to expose its x and y positions, instead of doing the interval polling on the dom element. Works much better if you don't mind hacking the lib.

Solution

  • I finally built what I was looking for, http://jsfiddle.net/tdQmQ/25 - still need to fix the z-index so headers show above the clone box though.