2

サイドバーのdivにクラス（「ロックボックス」など）を設定できるjQueryを使用して機能を作成しようとしています。これらの機能をスクロールすると、ウィンドウの上部にロックされます。

しかし、サイドバーにいくつかの異なるボックスを実装したいと思います。これらのボックスをスクロールすると、邪魔にならないように互いに押し出されます。私が使用できる最良の比較は、iPhoneの連絡先アプリとの比較です。各文字AZには、上部でロックされるタイトルバーがあります。しかし、Aを過ぎてスクロールすると、そのバーが押し出されてBタイトルバーが埋められます。これが私が話していることのスクリーンキャプチャです。

連絡先アプリのスクリーンショット

このような機能を作成するための最良のテクニックは何でしょうか？私はjQueryに精通していますが、.offset（）のようなプロパティを使用したことがないため、このインターフェイスの構築に取り組む最初のステップでさえ苦労しています。

事前に助けに感謝します！

4

1 に答える 1

2

実用的なフィドルを作成しました。リンク。

HTML：

<html>
<head></head>
<body>
    <div id="outer_div">
    <div class="lockdiv">Div A</div>
    <div class="lockdivcontent">
        <div class="regular">Text A 1</div>
        <div class="regular">Text A 2</div>
        <div class="regular">Text A 3</div>
        <div class="regular">Text A 4</div>
    </div>
    <div class="lockdiv">Div B</div>
    <div class="lockdivcontent">
        <div class="regular">Text B 1</div>
        <div class="regular">Text B 2</div>
        <div class="regular">Text B 3</div>
        <div class="regular">Text B 4</div>
    </div>
    <div class="lockdiv">Div C</div>
    <div class="lockdivcontent">
        <div class="regular">Text C 1</div>
        <div class="regular">Text C 2</div>
        <div class="regular">Text C 3</div>
        <div class="regular">Text C 4</div>
    </div>
    <div class="lockdiv">Div D</div>
    <div class="lockdivcontent">
        <div class="regular">Text D 1</div>
        <div class="regular">Text D 2</div>
        <div class="regular">Text D 3</div>
        <div class="regular">Text D 4</div>
    </div>
    <div class="lockdiv">Div E</div>
    <div class="lockdivcontent">
        <div class="regular">Text E 1</div>
        <div class="regular">Text E 2</div>
        <div class="regular">Text E 3</div>
        <div class="regular">Text E 4</div>
    </div>
    <div class="lockdiv">Div F</div>
    <div class="lockdivcontent">
        <div class="regular">Text F 1</div>
        <div class="regular">Text F 2</div>
        <div class="regular">Text F 3</div>
        <div class="regular">Text F 4</div>
    </div>
    <div>
</body>
</html>​

Javascript：

$(document).ready(function() {

    $('#outer_div').scroll(function(){

        $('.lockdivcontent').each(function(){
            var top = $(this).offset().top;
            var lockdiv = $(this).prev();
            if(top<lockdiv.height() && top>-1*($(this).height())) {
               lockdiv.offset({top:1});
            } else {
                lockdiv.offset({top:top-lockdiv.height()-1});
            }
        });

    });            
});

CSS：

#outer_div {
    width: 90%;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid lightgray;
    padding: 0 10px;
}

.lockdiv {
    width: 100%;
    background-color: lightgray;
    border: 1px solid;
    height: 20px;
}

.regular {
    width: 100%;
    background-color: #FAFAFA;
    height: 20px;
}
​

それが役立つかどうかを確認してください！

于 2012-09-17T21:51:56.543 に答える