Create this effect on mobile safari?

Question

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

I am using iScroll 4. I want to mix iScroll with this example.

http://jsfiddle.net/tdQmQ/3/ (this is what I still used to make the mouse click as a touch event)

If the headers are not in the scroll pane? If someone could point me in the right direction, that would be great.

The biggest problem is fixing on iScroll scroll events, I don't know how to do it.

thanks

EDIT: I finally created what I was looking for, http://jsfiddle.net/tdQmQ/25 - still need to fix the z-index so that the headers appear above the clone. Nonetheless.

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

Answer 1

I finally created what I was looking for, http://jsfiddle.net/tdQmQ/25 - you still need to fix the z-index so that the headers appear above the clone field though.

Answer 2

Boom: http://jsfiddle.net/jasper/tdQmQ/11/ ( Updated to include touchhend event as well as mouseup )

JS -

var scroller = new iScroll('scroll',{snap:'.header'}), $headers = $('.header:not(.fixed)'), prefix = $('#content')[0].style[0].replace('transition-property', ''); $('#content').on('mouseup touchend', function () { setTimeout(function () { var y = $('#content').css(prefix + 'transform').replace(')', '').split(',')[5], of = {index : 0, offset : 10000}; $headers.each(function (index, obj) { var tmp = Math.abs($(this).position().top + parseInt(y)); //console.log($(this).position().top + ' + ' + parseInt(y) + ' = ' + tmp); if (tmp < of.offset) { of.offset = tmp; of.index = index; } }); //console.log(of.index + ' = ' + of.offset); $('#head').text($headers.eq(of.index).text()); }, 500); }); 

HTML -

 <div id="iphonewrap"> <div class="header fixed" id="head">head1</div> <div id="scroll"> <ul id="content"> <li> <div class="header">head1</div> <div class="body">body1</div> </li> <li> <div class="header">head2</div> <div class="body">body2</div> </li> </ul> </div> </div> 

CSS -

 #head { position : absolute; top : 60px; left : 10px; right : 0; z-index : 10; } #scroll{ position: absolute; height: 300px; width: 200px; top: 60px; right: 10px; bottom: 60px: left: 10px; background: rgba(245,245,245,1); } #content{ min-height: 100%; width: 200px; } .header{ width: 198px; height: 30px; background: rgba(234,235,244,1); border: 1px solid white; text-align: center; padding-top: 10px; } .body{ width: 198px; height: 300px; background: rgba(224,225,234,1); border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; text-align: center; padding-top: 10px; } body{ background: rgba(234,234,234,1); font-family: sans-serif; color: rgba(34,34,34,0.7); } #iphonewrap{ position: absolute; height: 420px; width: 220px; left: 50%; top: 50%; margin-left: -110px; margin-top: -210px; background: black; border-radius: 20px; border: 1px solid gray; } 

setTimeout exists so that scrolling can occur to values ​​for which the end of the scroll will be available.

The vender prefix variable is pulled from the first style used by iScroll.