独立于父级 scrollTop 位置更改子级的位置 top/left

Question

我有几个 div 绝对定位在其父级中。父级溢出屏幕，可以滚动

单击时，那些 div 应该占据屏幕的高度（就好像它们的位置是固定的一样）。所以每个 div 都被分配了一定的宽度和高度以及一个 top 值。问题是，如果父级未滚动（scrollTop = 0），这只会按预期工作。

我希望顺利完成CSS转换。我可以在点击时刻分配一个与父级滚动位置相关的最高值。但是 我正在寻找一种 CSS 方法 来做到这一点。我想更改固定到 divs 的位置，但这不会转换。

有什么方法可以使它 使用 CSS 吗？

编辑：我想问是否有人对如何使用 CSS 实现此目的有一些建议，或者对如何以不同的方式处理它有一些想法。

Edit2：此 GIF 仅包括位置变化（宽度或高度没有变化），因为这是我遇到问题的地方。这是所需的解决方案：

var $container = $('#container');
var $elements = $container.find('.element');
$container

  .height(function() {

    return ($elements.eq(-1).position().top - $elements.eq(0).position().top + $elements.eq(0).outerHeight());

  })
  .on('click', function() {

    $elements.add($container).toggleClass('on');

  });

#container {
  width: 100%;
  background: grey;
  position: absolute;
}

.element {
  border: 1px solid black;
  position: absolute;
  width: 100px;
  height: 100px;
  background: white;
  left: 100px;
  transition: all 1s ease;
}

.element:nth-child(2) {
  top: 130px;
}

.element:nth-child(3) {
  top: 340px;
}

.element:nth-child(4) {
  top: 550px;
}

.element:nth-child(5) {
  top: 660px;
}

.on.element {
  left: 0;
  height: 20vh;
  width: 20vh;
}

.on.element:nth-child(2) {
  top: 20vh;
}

.on.element:nth-child(3) {
  top: 40vh;
}

.on.element:nth-child(4) {
  top: 60vh;
}

.on.element:nth-child(5) {
  top: 80vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Answer 1

正如您已经提到的，更改 position 不会转换。这是因为 position 是不可动画的属性，即 animations/transitions 不适合它，因此将位置从 absolute 更改为 relative 或副- versa 会出现 jumpy。检查 here 以获取动画属性列表。

您也可以从开头删除 .element 上的 position: absolute。

无论哪种方式，您都可以执行以下操作：

单击 div 后，仅在 #container 上添加 class on 并使用 position: relative 和 top: 0 修改 css并删除 top 个位置
在 #container 上添加 scrollY 的填充，以便 Div#1 在页面滚动时进入当前视口。

查看以下小提琴：

从头开始使用 relative： https://jsfiddle.net/4utdxr0t/2/

切换b/wrelative和position： https://jsfiddle.net/4utdxr0t/1/

Answer 2

添加一个相当于 scrollTop 位置 的 margin-top 值，并以与 children 相同的持续时间和轻松度进行过渡：

JSFiddle

var $container = $('#container');
var $elements = $container.find('.element');
$container

  .height(function() {

    return ($elements.eq(-1).position().top - $elements.eq(0).position().top + $elements.eq(0).outerHeight());

  })
  .on('click', function() {

    $elements.add($container).toggleClass('on');
    $container.css('margin-top', $('body').scrollTop());

  });

#container {
  width: 100%;
  background: grey;
  position: absolute;
  transition: all 1s ease;
}

.element {
  border: 1px solid black;
  position: absolute;
  width: 100px;
  height: 100px;
  background: white;
  left: 100px;
  transition: all 1s ease;
}

.element:nth-child(2) {
  top: 130px;
}

.element:nth-child(3) {
  top: 340px;
}

.element:nth-child(4) {
  top: 550px;
}

.element:nth-child(5) {
  top: 660px;
}

.on.element {
  left: 0;
  height: 20vh;
  width: 20vh;
}

.on.element:nth-child(2) {
  top: 20vh;
}

.on.element:nth-child(3) {
  top: 40vh;
}

.on.element:nth-child(4) {
  top: 60vh;
}

.on.element:nth-child(5) {
  top: 80vh;
}

.on.element:nth-child(6) {
  top: 25vh;
}
body {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

独立于父级 scrollTop 位置更改子级的位置 top/left

Change position top/left of children independently of the parent scrollTop position

javascript

css

jquery

position