Hallo,
ich bin frisch registriert und hoffe hier an der richtigen Stelle meine Frage zu stellen.
Ich möchte auf einer Website drei Bereiche untereinander haben.
Im ersten ist ein Bild im Hintergrund, welches nach oben weggeht beim scrollen, also ganz normal.
Der zweite Bereich soll nun hochscrollen, sobald das Bild den oberen Bildrand erreicht, soll es von background-attachment: auf fixed gesetzt werden.
Bisher konnte ich leider noch keine Funktion finden, die das kann.
Vielleicht würde mir auch am Anfang eine Funktion helfen die erkennt, wann das div den oberen Bildrand berührt.
.start{
background-image: url(Titel.jpg);
background-size: cover;
width: 100%;
height: 100vh;
}
.zwei{
background-image: url("Seite2.jpg");
background-size: cover;
width: 100%;
height: 100vh;
}
.drei{
background-image: url("Seite2farbe.jpg");
background-size: cover;
width: 100%;
height: 100vh;
}
<div class="start">Text</div>
<div class="zwei">Text</div>
<div class="drei">Text</div>
Alles anzeigen
Das ist so das Grundgerüst von den interessanten Stellen.
.start ist soweit von der Sache ja unberührt. Sobald allerdings .zwei komplett reingescrollt ist, soll es kleben bleiben im Hintergrund, im Vordergrund ist Text.
Ist der Bereich vorbei soll es ganz normal wieder weiterscrollen.
Hoffentlich hat jemand eine Idee.
Mit besten Grüßen