• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] CSS Transition kaputt wenn Änderung von Fixed auf Absolute

K

Knautschke

New member
Hi.

Folgende Situation:
Ich habe ein Element. Das klebt per "position: fixed" und "top: 0" am oberen Bildschirmrand, und ist somit für den User immer sichtbar. Nun möchte ich, dass das Element sich an eine andere Stelle bewegt, und dort bleibt, also unabhängig vom Bildschirmausschnitt ist. Also ändere ich die Position auf "absolute" und gebe einen passenden top Wert an, z.B. "1200px".

Also kurz:
Start: position "fixed", top "0"
Ziel: position "absolute", top "1200px"

Das ganze per CSS-Transition animiert. Das Problem ist nun wie folgt. Die Animation läuft so ab, als wären die Werte wie folgt:
Start: position "absolute", top "0"
Ziel: position "absolute", top "1200px"

Das liegt wohl daran, dass ja "fixed" auf "absolute" nicht so einfach animiert werden kann. Da "absolute top 0" und "fixed top 0" nicht das gleiche ist, springt also das Element, und die Animation ist kaputt.

Die einzige Lösung, die mir im Moment einfällt, wäre die "fixed" Position in eine absolute Position umzurechnen, das Element entsprechend zu positionieren, und dann die Animation auszuführen.

Soweit ich weiß gibt es jedoch keine einfache Methode, um den absoluten top-Wert eines Elements herauszufinden, wenn dieses auf "fixed" steht. Kennt da jemand eine praktische Funktion? Oder eine andere Methode wie ich das Problem lösen kann?

Danke und Gruß. :)
 
soweit ich weiß kann man ein element das auf fixed steht nicht bewegen. macht ja auch keinen sinn...

so wie ich das jetzt verstanden habe, wandert das element da hin wo es laut der angaben sein soll? und dann? soll es da bleiben oder wieder zurück? ich glaube hier wäre quellcode hilfreich um sich das mal selber während der ausführung ansehen zu können.
 
Zuletzt bearbeitet:
Wenn das <body> oder das <html> der offsetParent des Elements ist, kannst du doch einfach die Scrollposition der Seite auslesen und dann diesen Wert als top-Wert verwenden - da sollte dann nichts springen:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#fix {
	position: fixed;
	top: 0;
	left: 20px;
	height: 20px;
	width: 40px;
	background-color: yellow;
}
#click {
	margin-top: 2000px;
}
</style>
</head>
<body>
<div id="fix">hallo</div>
<div id="click">click</div>
<script type="text/javascript">
document.getElementById("click").onclick = function(){
	var fix = document.getElementById("fix");
	fix.style.top = window.pageYOffset + "px";
	fix.style.position = "absolute";
	window.setTimeout(function(){
		fix.style.transition = "top 2s";
		fix.style.top = "1950px";
	}, 50);
};
</script>
</body>
</html>
 
Hi.

Danke für die Antworten. :)

dertypdernixkan schrieb:
soweit ich weiß kann man ein element das auf fixed steht nicht bewegen. macht ja auch keinen sinn...

so wie ich das jetzt verstanden habe, wandert das element da hin wo es laut der angaben sein soll? und dann? soll es da bleiben oder wieder zurück? ich glaube hier wäre quellcode hilfreich um sich das mal selber während der ausführung ansehen zu können.
Zum Vergrößern anklicken....

Lass mich die Situation umformlieren. :)

Ich habe ein Element. Es befindet sich zunächst hier:
position: fixed; top: 0

Es soll hierhin (irgendeine Zahl für Top als Beispiel genommen):
position: absolute; top: 1200px

Dabei soll das Element flüssig animiert sein, auf dem Weg von der ersten zur zweiten Position, per CSS-Transition.
Problem: funktioniert nicht. Die Animation wird so berechnet, als wäre der Startpunkt "position: absolute; top: 0" und nicht "position: fixed; top: 0". Das sind natürlich zwei unterschiedliche Positionen. Von daher springt das Element erst von "position: fixed; top: 0" zu "position: absolute; top: 0" und bewegt sich dann per Transition zu "position: absolute; top: 1200px".

Im Moment sehe ich nur eine Möglichkeit wie ich das fixen könnte: ich lasse die "fixed"-Position raus, und positioniere das Element immer nur per "absolute". Dabei bin ich mir aber noch nicht sicher, wie ich eine absolute Position ausrechne, die so aussieht, als wäre es eine fixe Position. Ich bräuchte wohl ein Scroll-Event, welches jedesmal eine neue Position berechnet.

kkapsner schrieb:
Wenn das <body> oder das <html> der offsetParent des Elements ist, kannst du doch einfach die Scrollposition der Seite auslesen und dann diesen Wert als top-Wert verwenden - da sollte dann nichts springen:
Code: 
<!DOCTYPE html>[/quote]
Leider ist das nicht der Fall. Es gibt einiges an Content zwischen dem Element, in dem sich all das hier abspielen soll.

Ich schaue mal, wie ich per "absolute" eine "fixed" Position simulieren kann, auch wenn einiges an Content dazwischen ist. Da wird sich ja sicher etwas machen lassen. Sobald das funktioniert poste ich das mal hierhin. :)
Zum Vergrößern anklicken....
 
Mein Fehler. Ist viel einfacher als gedacht. Ich habe das ganze "fixed" Gedönse weggelassen, nud berechne einfach anhand von getBoundingClientRect().top, sowie der Größe des Elements, die passenden top-Werte. Das ist mit ein paar Zeilen erledigt und sieht gut aus. :)

Ich finde leider keine Möglichkeit den Thread selbst auf "gelöst" zu setzen. Falls ich das kann aber blind bin wäre ich für einen Tipp dankbar. Falls das nur Admins können, dann wäre das nett. :)
 
Zuletzt bearbeitet:
Knautschke schrieb:
Leider ist das nicht der Fall. Es gibt einiges an Content zwischen dem Element, in dem sich all das hier abspielen soll.
Zum Vergrößern anklicken....

Es ist völlig egal, wie viel Zeugs da dazwischen ist, es kommt nur darauf an, welches Element der offsetParent ist - also das Element, von dem dann die absolute Position aus gemessen wird. Wenn du mit getBoundingClientRect() arbeiten kannst, ist es wahrscheinlich der <body>.

Für kommende Generationen wäre es noch gut, wenn du deinen funktionierenden Code hier zeigen würdest. Danke.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben