6

モバイルサファリでこの効果を作りたいです。http://jqueryfordesigners.com/demo/header-slide.html

iScroll 4 を使用しています。iScroll とこの例を組み合わせたいと思います。

http://jsfiddle.net/tdQmQ/3/ (これまでのところ、マウスを使用してタッチイベントのようにフリックします)

ヘッダーはスクロール領域にあるべきではありませんか? 誰かが私を正しい方向に向けることができれば、それは素晴らしいことです.

最大の問題は、iScroll のスクロール イベントをラッチすることです。方法がわかりません。

ありがとう

編集:私は最終的に私が探していたものを構築しました。

EDIT2: 実際には、dom 要素で間隔ポーリングを行う代わりに、ライブラリを変更して x と y の位置を公開することになりました。ライブラリのハッキングを気にしないのであれば、はるかにうまく機能します。

4

2 に答える 2

3

ブーム: 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値が利用可能になる前にスクロールが発生するようにするためです。

venderprefix変数は、iScroll によって適用される最初のスタイルから取得されます。

于 2011-12-06T04:43:01.577 に答える
0

私はついに探していたものを構築しましたhttp://jsfiddle.net/tdQmQ/25 - ただし、ヘッダーがクローンボックスの上に表示されるように、z-indexを修正する必要があります。

于 2011-12-06T07:40:51.233 に答える