Ändern Position oben/links von Kindern unabhängig von der übergeordneten scrollTop Position

Question

Ich habe mehrere divs absolut innerhalb seiner Eltern positioniert. Der Elternteil überläuft den Bildschirm und kann gescrollt werden.

Beim Klicken sollten diese divs so positioniert werden, dass sie die Höhe des Bildschirms einnehmen (als ob sie ihre Position fixiert hätten). Jedem Div wird also eine bestimmte Breite und Höhe und ein Top-Wert zugewiesen. Das Problem ist, das funktioniert nur wie erwartet, wenn der Eltern nicht gescrollt wird (scrollTop = 0).

Ich möchte dies reibungslos mit CSS-Übergängen getan werden. Ich könnte einen Top-Wert zuweisen, der sich auf die Scroll-Position des Elternteils im Klick-Moment bezieht. Aber Ich suche nach einer CSS-Methode, um dies zu tun. Ich dachte daran, die Position in den Divs zu ändern, aber das ändert sich nicht.

Gibt es eine Möglichkeit, wie ich es funktionieren lassen könnte mit CSS?

Bearbeiten: Ich frage, ob jemand einen Vorschlag hat, wie dies mit CSS erreicht werden kann, oder etwas darüber nachdenken, wie man es anders angehen kann.

EDIT2: Diese GIF-Änderung nur die Position enthält (die Breite oder Höhe ist kein Wechsel), wie es ist, wo ich das Problem habe. Dies ist die gewünschte Lösung:

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

einen margin-top-Wert äquivalent zu dem Hinzufügen von ScrollTop Position, und es mit der gleichen Dauer und Leichtigkeit zu überführen wie die Kinder der Trick:

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

Wie Sie bereits erwähnt Ändern position Übergang nicht. Dies liegt daran, dass position eine nicht animierbare Eigenschaft ist, d. H. Animationen/Übergänge funktionieren nicht dafür und daher wird die Position von absolute zu relative oder umgekehrt jumpy angezeigt. Überprüfen Sie here für eine Liste der animierbaren Eigenschaften.

Sie können auch die position: absolute auf .element von Anfang an entfernen.

So oder so, hier ist was Sie tun können:

1. Auf div klicken, Klasse hinzufügen on auf #container nur und modifizieren CSS mit position: relative und top: 0 und entfernen Sie die zusätzlichen Regeln für top Positionen
2. hinzufügen padding von scrollY auf #container, so dass Div # 1 in aktuellen Ansichtsfenster kommt, wenn Seite gescrollt wird.

Kasse der unter Geigeen:

Mit relative von Anfang: https://jsfiddle.net/4utdxr0t/2/

Switching b/w relative und position: https://jsfiddle.net/4utdxr0t/1/