javascript - 如何根据滚动条在另一个 div 上方或下方移动 div？

Question

这是我的情况：

我有一堆行。每行都有一个按钮，单击该按钮会显示一组选项。根据行在页面中的位置，设置需要在按钮上方或下方打开。如果按钮位于页面顶部，则设置将显示在按钮下方。如果按钮位于页面底部，则应在上方打开。

如果用户在页面底部选择了一些东西，然后滚动到顶部，我需要将设置转移到按钮下方而不是顶部。最好的方法是什么？我实际上不确定有什么方法可以做到这一点，所以任何建议都将不胜感激。

Answer 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 );
        }
    });
}