Machen Sie Divs je nach Scroll klebrig/nicht klebrig ⇐ Jquery

[Guest]

Auf einer meiner Website-Seiten habe ich zwei Divs, „.page-biography-section-right-sub-section-left“ und „.page-biography-section-right-sub-section-right“, enthalten innerhalb eines übergeordneten Divs „.page-biography-section-right“, angezeigt mit Flexbox.
Im Backoffice habe ich 3 Inhaltsblöcke, einen pro Zeitraum (1944-1984, 1984-1998, 1998-2001). Jeder Block enthält ein Textfeld und ein Wiederholungsfeld mit Bildern.
Im Frontend möchte ich, dass meine 3 Textblöcke in der linken Spalte „.page-biography-section-right“ erscheinen -sub-section-left“, jeweils innerhalb eines div „.biography-bloc-text“, vertikal gestapelt mit den IDs „_1944-1984“, „_1984-1998“ und „_1998-2021“. Die Bilder sollten in der rechten Spalte „.page-biography-section-right-sub-section-right“ vertikal gestapelt erscheinen, jeweils innerhalb eines Div „.page-content-section-right-img-container“. Jeder dieser Bildcontainer verfügt über ein rel-Attribut, beispielsweise rel="1944-1984", das dem zugehörigen Textblock entspricht. Der erste Block entspricht „1944–1984“, der zweite „1984–1998“ und der dritte „1998–2021“.
Hier ist das Verhalten, das ich erreichen möchte :
Beim Laden der Seite bleibt der erste Textblock „.biography-bloc-text“ in der linken Spalte hängen. und in der rechten Spalte bleiben die „.page-content-section-right-img-container divs“ hängen, wenn sie den oberen Rand des Ansichtsfensters erreichen. Sobald der letzte „.page-content-section-right-img-container“, der mit dem ersten Textblock verknüpft ist, den Bildlauf beendet, ist der erste Textblock nicht mehr „sticky“ und der nächste „.biography-bloc-text“ wird „sticky“. Die Bildcontainer in der rechten Spalte verhalten sich weiterhin auf die gleiche Weise. Dieses Verhalten wiederholt sich für alle drei Textblöcke und ihre entsprechenden Bildcontainer.
Wenn der Benutzer wieder nach oben scrollt, sollte sich das Verhalten umkehren, wobei jeder Textblock nur dann eingeklebt wird, wenn die zugehörigen Bilder sichtbar sind im Ansichtsfenster.
Das ist, was ich bisher habe:
html :

Code: Select all

[url=#][/url]
(1944-1984)
[list]
[*]1944-1969
[*]1969-1972
[*]1973-1984
[/list]

[url=#][/url]
(1984-1998)
[list]
[*]1984-1986
[*]1987-1990
[*]1989-1995
[*]1995-1998
[/list]

[url=#][/url]
(1998-2021)
[list]
[*]1998-2003
[*]2003-2009
[*]2010-2013
[*]2014-2021
[/list]





[img]https://fastly.picsum.photos/id/175/536/354.jpg?hmac=EHlNLOT5uMj3h2CECyDN3o-puYqhu1a9chiXMuvQWCw[/img]

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod



[img]https://fastly.picsum.photos/id/430/536/354.jpg?hmac=uxrNCXgJuycp2JMZ9jpZb5ThTsZIplRTSPuc4ybMyws[/img]

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod



[img]https://fastly.picsum.photos/id/387/536/354.jpg?hmac=Zs1KZbc0jXe2zZP7yKL_OrUKxdUVFH0LqLoegVZnIuA[/img]

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod



[img]https://fastly.picsum.photos/id/403/536/354.jpg?hmac=Cg78SPqGbiGuHfV34a5FcODRJKcDZ6BJu_xkudFYCrE[/img]

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod



[img]https://fastly.picsum.photos/id/554/536/354.jpg?hmac=D-spLEtV3F0Tjf9bJcNPOFrqI2Qv6HgRkeydjD7dug8[/img]

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod



[img]https://fastly.picsum.photos/id/870/536/354.jpg?hmac=AMJzzUg_6QocQmkby_VWRi3LY_D7E9NcYcT_j7kJsYw[/img]

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod



[img]https://fastly.picsum.photos/id/436/536/354.jpg?hmac=7Tk-gHN3W43qiyfXxkZZ8VW3T4tubs1gD6xkYzifiRk[/img]

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod



[img]https://fastly.picsum.photos/id/256/536/354.jpg?hmac=2oqqAgYp33LoAy3nMLztmG4prUmC1bQx0M7_iG9tnsA[/img]

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod



[img]https://fastly.picsum.photos/id/1023/536/354.jpg?hmac=q17Uvpe-LDdjeCkEbPPP9qjcYpxVPRpzdTeloXPZaVY[/img]

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod



[img]https://fastly.picsum.photos/id/879/536/354.jpg?hmac=DHlAvQ-DPSPs6YaodJBSc3a9sVFzvTqygKTW1cTbFFY[/img]

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod



[img]https://fastly.picsum.photos/id/291/536/354.jpg?hmac=bfJIaH0FmtH4w44We3rF30m4Kd8zK4jsOAbLFVh2E20[/img]

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod



[img]https://fastly.picsum.photos/id/59/536/354.jpg?hmac=HQ1B2iVRsA2r75Mxt18dSuJa241-Wggf0VF9BxKQhPc[/img]

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod

und CSS :

Code: Select all

.page-biography-section-right {
width: 85%;
display: flex;
}

.page-biography-section-right-sub-section-left {
width: calc(100% - (50% / 0.85));
}

.biography-bloc-text {
padding: 15px;
background-color: white;
padding-bottom: 25vh;
border-top: 0.5px solid;
position:sticky;
top: 85.5px;
}

.biography-bloc-text a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.biography-bloc-text h1 {
font-size: 61px;
line-height: 68px;
}

.biography-bloc-text ul {
list-style: none;
font-size: 15px;
line-height: 17px;
}

.page-biography-section-right-sub-section-right {
width: calc(50% / 0.85);
}

.page-content-section-right-img-container {
position: sticky;
top: 85.5px;
margin-bottom: 30px;
}

.page-content-section-right-img-container.taille_2 {
padding-right: 25%;
}

.page-content-section-right-img-container.taille_3 {
padding-right: 33%;
}

.page-content-section-right-img-container img {
margin-bottom: 15px;
}

.caption {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
}

img {
width: 100%;
height: auto;
display: block;
}

Kann mir jemand dabei helfen? Es ist möglich, das CSS und auch das HTML offensichtlich zu ändern und JQuery/Javascript zu verwenden.
Hier ist eine JSfiddle:
https://jsfiddle.net/br3fqn2s/