Guten Morgen zusammen
Wir wollten ein CSS Element mit dem Attribut position:fixed dynamisch ausrichten. Damit die Ausrichtung in jeder Bildschirmauflösung und bei Veränderung der Fenstergrösse erhalten bleibt, haben wir ein jQuery Script dafür erstellt.
Die Funktionsweise ist einfach. Die jQuery Methode offset() gibt vom entsprechenden jQuery Selektor die absolute Position zurück. Mit dieser Position kann dann das absolut positionierte Element an der gewünschten Position dargestellt werden.
Ein Beispiel gefällig?
$(document).ready(function(){
$(window).on("resize", function () {
//Margin zum Element
var margin = 40;
//Horzonzale Positionierung des Elements
var top = $(window).height() * 0.1;
//Absolute Position auslesen
var position = $(".relativ-element").offset();
position.left += $(".relativ-element").width() + margin;
//CSS anpassen
$(".fixed-element").css({
'position': 'fixed',
'left': position.left + "px",
'top': top + "px",
});
});
$(window).trigger("resize");
});
Die funktionale Variante finden Sie hier: http://jsfiddle.net/SLf5S/
Das klingt für mich ein wenig nach «bad practice». Warum genau Javascript? Dafür gibt es rem, ems und % Masseinheiten.
Hallo René
Ja, % und ems können aber nur einsetzt werden, wenn sich das Element immer an der selben Position befinden soll.
In unserem Fall hing die Positionierung stark von der Auflösung des Monitors ab, und darum sind wir auf JavaScript ausgewichen.
Ich bin mir immer noch nicht sicher, welche Problematik du mit Javascript bekämpfen willst.
http://jsfiddle.net/SLf5S/6/
Das Problem war folgendes:
je nach Inhalt der Webseite und der Bildschirmauflösung musste das Element an einer anderen Stelle plaziert werden. Die einzige Konstante war der Abstand zu einem relativen Element.
Das heisst: Manchaml war das fixed Element bei 50%, dann wieder bei 30%, ect.
Edit: Ich habe deinen jsfiddle erst jetzt gesehen: Das Stimmt, jedoch war bei unserem Projekt die Breite des relativen Elements nicht fix.
Hallo, vielen Dank fuer den Tip in bezug auf jsfiddle,net, die Website war mir nicht bekannt, ist äusserst anwendbar!
Gruss!