Question

我想我差不多了，但我想要完成的事情有点独特。

我有多个面板分为2列，每个面板可以触发展开/压缩的切换。

问题是我想保持触发切换的元素的垂直位置，这样用户就不会失去他们想要在展开模式下看到的面板的轨迹。

触发展开时，我无法让底部面板的滚动位置向上移动。

$('button').click(function () {
    var id = $(this).closest('div').attr('id');
    var target = $('#' + id);
    $('html,body').animate({
        scrollTop: target.offset().top
    }, 1000);

    $('.fa-compress').toggle();
    $('.fa-expand').toggle();
    $('.row > div').toggleClass('col-xs-6').toggleClass('col-xs-12');
});

这是我的 JS Fiddle

**更新

默认情况下，用户将从压缩视图开始（2列）如果他们希望查看其中一个面板，将单击展开按钮 - 单击此按钮时，将展开动画，我希望在不移动触发面板的情况下进行此展开动画。这就是我保持垂直定位的意思。

Answer 1

老实说，我并不完全确定你要求的是什么。但是这里。

$('button').click(function(){
    //your stuff     here first

    var container = $(this).closest('panel');

    //gets elements distance to the top of the viewable screen
    var viewableOffset = $(container).offset().top - $(window).scrollTop(); 

   //makes the panel fixed and glued at the distance to the top of screen
   // the same as when you clicked it. keeping its vertical position         
   $(container).css('position', 'fixed');
   $(container).css('top', viewableOffset + 'px');

}

编辑：对不起，没有包括如何保持左侧位置，但你有足够的想法：）

编辑1

现在我明白了。如果你需要面板在进入全宽时保持在屏幕上的相同位置，而不滚动页面：你需要在dom中移动（追加）元素。

对此的psudo是计算前任的数量，然后将所选面板追加到该数量的一半后，向下舍入到最接近的偶数。

让我们说扩展小组5。

＃5之前的兄弟姐妹数量为4

4/2 = 2

在扩展视图中将＃2放在＃2之后，将＃5置于小视图中的高度。

以某种方式保存＃5的原始位置，并在最小化时将其恢复到该位置将使所有内容恢复原状。

Answer 2

试试这个：

$('button').click(function () {
    var $target = $(this).closest('.panel');
    var targetIndex = $('.panel').index($target);

    var singleHeight = $target.outerHeight(true);
    var totalHeight = singleHeight * targetIndex;

    $('html').animate({
        scrollTop: totalHeight
    }, 500);    

    $('.fa-compress').toggle();
    $('.fa-expand').toggle();
    $('.row > div').toggleClass('col-xs-6').toggleClass('col-xs-12');
});

JSFiddle

jQuery - 如何保持元素相对于屏幕的垂直位置？

2 个答案:

编辑1