CSS Ein DIV soll mitscrollen

hemorieder

Lieutenant
Registriert
März 2003
Beiträge
649
Hi,

ich habe folgendes Problem:

Ich habe eine HTML Seite welche innerhalb einer DIV Box eine sehr lange Liste beinhaltet, diese ist links.
Auf der rechten Seite ist ein weiteres DIV, dieses soll immer an der selben Position sein, auch wenn man scrollt, also quasi immer oben.
Der Code dazu sieht so aus:

HTML:
<html>
<body style="background-color:grey;">
<h2>iplamericana.xml</h2>
<style>.flexed {  display: flex; } .pic{flex: 0 0 auto;} a {cursor: pointer;}</style>
<div class="flexed">
    <div class="flexitem">
      Hier ist eine lange Liste
    </div>
    <div class="pic" >
        <img style="margin:0px 0px 0px 100px" src="files/default.png" height="200px"  id="imageshow">
    </div>
</div>
</body>
</html>

Gibt es eine einfache Möglichkeit dies zu realisieren?

lg
 
  • Gefällt mir
Reaktionen: hemorieder
Eigentlich müsste es mit sticky klappen.

<Umschließender Container />
<div mit Liste (float: left;)>
<div mit Bild (float: right; position: sticky;>
< />

@failormooNN
Dann verkleinere mal das Browserfenster. Durch die fixe Breite liegt das Bild irgendwann über dem Text. Was natürlich klar ist, wenn ich das Bild am oberen rechten Browserrand fixieren.
 
kachiri schrieb:
@failormooNN
Dann verkleinere mal das Browserfenster. Durch die fixe Breite liegt das Bild irgendwann über dem Text. Was natürlich klar ist, wenn ich das Bild am oberen rechten Browserrand fixieren.

Das stimmt. Die Frage war aber auch nicht, wie sich das ganze responsive verhält, sondern wie es überhaupt möglich ist. Ich denke mit dieser Basis kann @hemorieder etwas anfangen und weiter darauf aufbauen. ;)
Mal abgesehen davon, dass position:sticky; in älteren IE Versionen Probleme machen kann.
 
  • Gefällt mir
Reaktionen: Madman1209
Hier wäre noch wichtig zu wissen, das "position: sticky" relativ schlecht von den Browser supportet wird. Falls InternetExplorer11 oder älter für das Projekt noch relevant sind - muss man das (leider) mit JavaScript lösen.

Position Sticky - Browser Support
 
Zurück
Oben