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?

Hoppy Easter und viel Erfolg bei der Osternästlisuche!

Elodie Forti
Wir verabschieden uns für ein paar Tage ins …
Blogbeitrag ansehen

Personas und ihre Vorteile und Gefahren

Dominik Schendl
Zuerst gilt die Frage, für welche Benutzer etwas …
Blogbeitrag ansehen
Gesicht mit UX Design Post-it auf der Stirn
UX

UX Irrtümer Teil 3 – Unzertrennbares UI/UX

Dominik Schendl
Im Grunde gibt es zu UI/UX gar nicht …
Blogbeitrag ansehen