Absolut positionierte HTML-Elemente dynamisch ausrichten

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/