0

これが私の状況です：

私はたくさんの行を持っています。各行にはボタンがあり、クリックすると一連のオプションが表示されます。行がページ内のどこにあるかに応じて、ボタンの上または下で設定を開く必要があります。ボタンがページの上部にある場合、設定はボタンの下に表示されます。ボタンがページの下部にある場合は、上に開く必要があります。

ユーザーがページの下部で何かを選択した後、スクロールすると上部に移動する場合、上部ではなくボタンの下に設定を移動する必要があります。これを行う最善の方法は何ですか？これを行う方法が実際にはわからないので、アドバイスをいただければ幸いです。

4

1 に答える 1

1

http://jsfiddle.net/573zJ/

次のように、ビューポートの中点を基準にして要素の位置をテストし、コンテナを基準にして最初または最後の位置に移動します。

<div class="container">
    <div class="element-set">
        <div class="normal">content</div>
        <div class="flipper">flipper</div>
    </div>

    ... random number of .element-set

    <div class="element-set">
        <div class="normal">content</div>
        <div class="flipper">flipper</div>
    </div>
</div>

と

$(window).scroll(function () {
    flippers();
});

function flippers() {
    var midpoint = $(window).height() / 2;
    $('.flipper').each( function () {

        var $flipper = $(this);
        var $parent = $flipper.parent();
        var top = $parent.position().top - $(window).scrollTop();

        if ( top > midpoint ) {
            $flipper.prependTo( $parent );
        } else {
            $flipper.appendTo( $parent );
        }
    });
}
于 2013-07-09T23:37:55.090 に答える