• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Element an linken Browserrand anheften (fixed), dennoch scrollbar

T

tigtman

Mitglied
Hallo zusammen,

ich versuche einen Button am linken Browserrand zu fixieren.
HTML: 
position: fixed; left: 0px;
Nun ist der Button auf der linken Seite "angeheftet". Wenn ich nun nach unten scrolle, dann rutscht der Button aber immer mit nach unten, was auch klar ist, aber: Wie kann ich das umgehen? --> Der Button soll auf der linken Seite immer fix bleiben, auch wenn sich die Grösse des Browserfensters ändert, aber er soll nach unten hin scrollbar bleiben.

Besten Dank für Ihre Ideen.

Grüsse

Jö
 
Du musst das Element direkt im Body platzieren.

Und dann als
HTML: 
position:absolute;left:0;

fixed orientiert sich nämlich immer am Viewport, und der scrollt nunmal mit.
 
Hi scbawik,

besten Dank für den Ansatz. Wie sieht es aber nun aus, wenn andere Elemente darunter liegen? Besteht die Möglichkeit im "Nachhinein" einer class zu sagen, dass sie sich über Alles hinwegsetzen soll und sich am body zu richten hat?

Besten Dank.
 
Wie sieht denn deine Verschachtelung aus?

So:

HTML: 
<body>
    <div class="parent">
        <div class="mein-button"></div>
    </div>
</body>

Oder so:

HTML: 
<body>
<div class="mein-button"></div>
<div class="weiteres-element"></div>
</body>
 
Zuletzt bearbeitet:
Erstere, denn beim zweiten unterstehen ja beide DIVs dem body. Gibt es denn eine Möglichkeit Klassen nach "oben" hin zu überspringen?
 
Das klappt nur, solange du alle Parent-DIVs NICHT als position 'absolute', 'relative' oder 'fixed' festgelegt hast. Dann orientiert sich 'absolute' am Body.

Aber ich denke nicht dass das der Fall ist.

Ansonsten fällt mir nur eine jQuery/JavaScript-Lösung ein. Kommt das für dich in Frage?

Was genau spricht denn dagegen, den Button direkt in den Body zu 'pflanzen'?
 
Das habe ich "befürchtet". ;) Nun ja, dieser Button ist Teil einer Galerie. Nun... dann werde ich "einfach" versuchen mit JS das Body-Element aufzuspüren und dem Button dann zu positionieren.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben