Javascript 如何根据滚动条将div移到另一个div的上方或下方？

我的情况如下：

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

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

测试元素相对于视口中点的位置，并将其移动到相对于其容器的第一个或最后一个位置，如下所示：

<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>

---

这是一个相当复杂的问题，您可以展示一些HTML来说明示例，或者设置一个JSFIDLE吗？应该是直接的，为选项的每个位置使用两个类，获取scrollTop位置并与元素偏移量进行比较，以查看它是在屏幕的顶部还是底部，并相应地交换类。看看jQueryUI，它将为您执行冲突检测，如果需求发生变化，它很容易定制。

$(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 );
        }
    });
}