Question

这是我的情况：

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

如果用户在页面底部选择了一些东西，但随后滚动到顶部，我需要设置在按钮下移动而不是在顶部。最好的方法是什么？我真的不确定是否有任何方法可以做到这一点，所以任何建议都会受到赞赏。

Answer 1

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

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

如何根据滚动条在另一个div之上或之下进行div移位？

1 个答案: