james.schuepbach

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/

5 responses to “Absolut positionierte HTML-Elemente dynamisch ausrichten

    1. 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.

        1. 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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Lust auf mehr?

Eignet sich Twitter für mein Unternehmen? 12 Facts und 8 Benefits

Sarah Berger
1.3 Milliarden User weltweit und 500 Millionen Tweets …
Blogbeitrag ansehen

Interview mit Bijoux Stadelmann: Wie hat die Coronavirus-Krise ihre Geschäftssituation verändert?

Anna Gottschalk
“Drastisch”, erzählt uns die fröhliche Nicole Stadelmann am …
Blogbeitrag ansehen