Сделать элементы div липкими/нелипкими в зависимости от прокрутки ⇐ Jquery

[Anonymous]

На одной из страниц моего веб-сайта у меня есть два элемента div: «.page-biography-section-right-sub-section-left» и «.page-biography-section-right-sub-section-right», содержащиеся внутри родительского div ".page-biography-section-right", отображаемого с помощью flexbox.
В бэк-офисе у меня есть 3 блока контента, по одному на период времени (1944-1984, 1984–1998, 1998–2001). Каждый блок содержит текстовое поле и поле-повторитель с изображениями.
На передней панели я хочу, чтобы мои 3 текстовых блока отображались в левом столбце ".page-biography-section-right". -sub-section-left", каждый в пределах div ".biography-bloc-text", расположенных вертикально с идентификаторами "_1944-1984", "_1984-1998" и "_1998-2021". Изображения должны появиться в правом столбце «.page-biography-section-right-sub-section-right», расположенном вертикально, каждое внутри div «.page-content-section-right-img-container». Каждый из этих контейнеров изображений имеет атрибут rel, например rel="1944-1984", соответствующий связанному текстовому блоку. Первый блок соответствует «1944-1984», второй — «1984-1998», а третий — «1998-2021».
Вот какого поведения я пытаюсь добиться :
При загрузке страницы первый текстовый блок «.biography-bloc-text» в левом столбце прилипает. и в правом столбце элементы div «.page-content-section-right-img-container» становятся липкими, когда они достигают верхней части области просмотра. Как только последний «.page-content-section-right-img-container», связанный с первым текстовым блоком, завершает прокрутку, первый текстовый блок перестает быть липким, а следующий «.biography-bloc-text» становится «липким». Контейнеры изображений в правом столбце продолжают вести себя так же. Такое поведение повторяется для всех трех текстовых блоков и соответствующих им контейнеров изображений.
Когда пользователь прокручивает резервную копию, поведение должно измениться: каждый текстовый блок становится липким только тогда, когда связанные с ним изображения видны. в области просмотра.
Вот что у меня есть:
html :

Код: Выделить всё

[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

и CSS:

Код: Выделить всё

.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;
}

Может ли кто-нибудь мне с этим помочь? можно явно изменить CSS, HTML тоже и использовать jquery/javascript
вот jsfiddle:
https://jsfiddle.net/br3fqn2s/

Подробнее здесь: https://stackoverflow.com/questions/793 ... -on-scroll