更改獨立於父項的子項的頂部/左側位置

Question

我有幾個div完全位於其父項內。 家長溢出屏幕並可以滾動。

點擊這些div應該佔據屏幕的高度（就好像它們已經固定了位置一樣）。所以每個div都被賦予一定的寬度和高度以及最高值。問題是這隻能按預期方式工作，如果父母沒有滾動（scrollTop = 0）。

我希望這樣做順利與CSS過渡。我可以在點擊時刻分配與父級滾動位置相關的頂級值。但是我正在尋找一個CSS方式來做到這一點。我想改變固定在div上的位置，但這不會轉換。

有什麼辦法，我可以讓它使用CSS工作？

編輯：我問如果任何人有關於如何實現這一點使用CSS，或者對如何不同的方法處理它的一些想法一些建議。

EDIT2：此GIF僅包括位置變化（寬度或高度沒有變化），因爲它是我在哪裏遇到的問題。這是所希望的解決方案：

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 { 
 
    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

添加相當於一個邊距值scrollTop位置，並以相同的持續時間和輕鬆過渡爲孩子們做的伎倆：

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>

Answer 2

正如你已經提到改變position不過渡。這是因爲position是非動畫屬性，即動畫/轉換不起作用，因此將位置從absolute更改爲relative或反之亦然將出現跳動。檢查here以獲取動畫屬性列表。

您也可以在.element從一開始就刪除position: absolute。

無論哪種方式，這裏是你可以做什麼：

1. 在點擊格，只#container添加on類，並修改CSS與position: relative和top: 0，並刪除多餘的規則top位置
2. 添加填充的scrollY上#container，使事業部＃1進入當前視圖如果頁面滾動。

結帳以下小提琴：

使用relative從開始： https://jsfiddle.net/4utdxr0t/2/

交換的B/W relative和position： https://jsfiddle.net/4utdxr0t/1/