在移动Safari中创建这种效果？

Question

我想在移动游猎中创建这种效果。 http://jqueryfordesigners.com/demo/header-slide.html

我正在使用iScroll 4。我想将 iScroll 与此示例混合。

http://jsfiddle.net/tdQmQ/3/ （这是我到目前为止所拥有的，使用鼠标像触摸事件一样轻拂）

标题不应该位于滚动区域吗？如果有人能指出我正确的方向，那就太好了。

最大的问题是锁定 iScroll 的滚动事件，我不知道如何。

谢谢

编辑：我终于构建了我想要的东西， http://jsfiddle.net/tdQmQ/25 - 仍然需要修复 z-index，以便标题显示在克隆框上方。

EDIT2：实际上我最终更改了库以公开其 x 和 y 位置，而不是对 dom 元素进行间隔轮询。如果您不介意破解该库，效果会更好。

Answer 1

繁荣：http://jsfiddle.net/jasper/tdQmQ/11/ (更新为包括 touchend 事件以及 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 存在，因此滚动可以在滚动结束位置的值之前发生可用。

vender prefix 变量是从 iScroll 应用的第一个样式中提取的。

Answer 2

我终于构建了我想要的东西， http://jsfiddle.net/tdQmQ/25 - 仍然需要修复 z-index，以便标题显示在克隆框上方。