Create this effect in mobile safari?

Question

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.

Answer 1

Boom: http://jsfiddle.net/jasper/tdQmQ/11/ (Updated to include the touchend 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;
}

The setTimeout is there so the scroll can occur before values for where the scroll ends will be available.

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

Answer 2

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.