这是我的情况:
我有一堆行。每行都有一个按钮,单击该按钮会显示一组选项。根据行在页面中的位置,设置需要在按钮上方或下方打开。如果按钮位于页面顶部,则设置将显示在按钮下方。如果按钮位于页面底部,则应在上方打开。
如果用户在页面底部选择了一些东西,然后滚动到顶部,我需要将设置转移到按钮下方而不是顶部。最好的方法是什么?我实际上不确定有什么方法可以做到这一点,所以任何建议都将不胜感激。
这是我的情况:
我有一堆行。每行都有一个按钮,单击该按钮会显示一组选项。根据行在页面中的位置,设置需要在按钮上方或下方打开。如果按钮位于页面顶部,则设置将显示在按钮下方。如果按钮位于页面底部,则应在上方打开。
如果用户在页面底部选择了一些东西,然后滚动到顶部,我需要将设置转移到按钮下方而不是顶部。最好的方法是什么?我实际上不确定有什么方法可以做到这一点,所以任何建议都将不胜感激。
测试元素相对于视口中点的位置,并将其移动到相对于其容器的第一个或最后一个位置,如下所示:
<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 );
}
});
}