Question

我有几个div完全位于其父级内。父级溢出屏幕并可以滚动。

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

我希望通过CSS过渡完成顺利。我可以在点击时刻指定与父级滚动位置相关的最高值。但我正在寻找一种CSS方式来做到这一点。我想改变固定在div上的位置，但这不会过渡。

有什么方法可以让它使用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是不可动画的属性，即动画/过渡不适用于此，因此将位置从absolute更改为relative或反之亦然跳动。检查here以获取可动画属性列表。

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

无论哪种方式，这都是你可以做的：

点击div后，仅在on上添加课程#container并使用position: relative和top: 0修改css，并移除top位置的额外规则
在scrollY上添加#container的填充，以便在页面滚动时 Div＃1 进入当前视口。

查看下面的小提琴：

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

切换黑白relative和position： https://jsfiddle.net/4utdxr0t/1/

Answer 2

添加一个与scrollTop位置相当的margin-top值，并以与孩子们相同的持续时间和轻松过渡它：

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位置更改子项的顶部/左侧位置

2 个答案: