on one of my website pages, I have two divs, “.page-biography-section-right-sub-section-left” and “.page-biography-section-right-sub-section-right”, contained within a parent div “.page-biography-section-right” displayed using flexbox.
In the back office, I have 3 content blocks, one per period of time (1944-1984, 1984-1998, 1998-2001). Each block contains a text field and a repeater field with images.
On the front end, I want my 3 text blocks to appear in the left column “.page-biography-section-right-sub-section-left”, each within a div “.biography-bloc-text”, stacked vertically with IDs “_1944-1984”, “_1984-1998”, and “_1998-2021”. The images should appear in the right column “.page-biography-section-right-sub-section-right”, stacked vertically, each within a div “.page-content-section-right-img-container”. Each of these image containers has a rel attribute, for example, rel=”1944-1984″, corresponding to the associated text block. The first block corresponds to “1944-1984”, the second to “1984-1998”, and the third to “1998-2021”.
Here’s the behavior I’m trying to achieve:
On page load, the first text block “.biography-bloc-text” in the left column is sticky. and n the right column, the “.page-content-section-right-img-container divs” are sticky as they reach the top of the viewport. Once the last “.page-content-section-right-img-container” associated with the first text block finishes scrolling, the first text block stops being sticky, and the next “.biography-bloc-text becomes” sticky. The image containers in the right column continue behaving the same way. This behavior repeats for all three text blocks and their corresponding image containers.
When the user scrolls back up, the behavior should reverse, with each text block becoming sticky only while its associated images are visible in the viewport.
This is what I have so far:
html :
<div class="page-biography-section-right">
<div class="page-biography-section-right-sub-section-left">
<div class="page-biography-section-right-sub-section-left-inside">
<div class="biography-bloc-text" id="_1944-1984">
<a href="#"></a>
<h1>(1944-1984)</h1>
<ul>
<li>1944-1969</li>
<li>1969-1972</li>
<li>1973-1984</li>
</ul>
</div>
<div class="biography-bloc-text" id="_1984-1998">
<a href="#"></a>
<h1>(1984-1998)</h1>
<ul>
<li>1984-1986</li>
<li>1987-1990</li>
<li>1989-1995</li>
<li>1995-1998</li>
</ul>
</div>
<div class="biography-bloc-text" id="_1998-2021">
<a href="#"></a>
<h1>(1998-2021)</h1>
<ul>
<li>1998-2003</li>
<li>2003-2009</li>
<li>2010-2013</li>
<li>2014-2021</li>
</ul>
</div>
</div>
</div>
<div class="page-biography-section-right-sub-section-right">
<div class="page-content-section-right-img-container taille_1" rel="1944-1984">
<img src="https://fastly.picsum.photos/id/175/536/354.jpg?hmac=EHlNLOT5uMj3h2CECyDN3o-puYqhu1a9chiXMuvQWCw" alt="dsds">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur <br /> adipiscing elit, sed do eiusmod
</div>
</div>
<div class="page-content-section-right-img-container taille_3" rel="1944-1984">
<img src="https://fastly.picsum.photos/id/430/536/354.jpg?hmac=uxrNCXgJuycp2JMZ9jpZb5ThTsZIplRTSPuc4ybMyws" alt="dsds">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur <br /> adipiscing elit, sed do eiusmod
</div>
</div>
<div class="page-content-section-right-img-container taille_1" rel="1944-1984">
<img src="https://fastly.picsum.photos/id/387/536/354.jpg?hmac=Zs1KZbc0jXe2zZP7yKL_OrUKxdUVFH0LqLoegVZnIuA" alt="dsds">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur <br /> adipiscing elit, sed do eiusmod
</div>
</div>
<div class="page-content-section-right-img-container taille_2" rel="1944-1984">
<img src="https://fastly.picsum.photos/id/403/536/354.jpg?hmac=Cg78SPqGbiGuHfV34a5FcODRJKcDZ6BJu_xkudFYCrE" alt="dsds">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur <br /> adipiscing elit, sed do eiusmod
</div>
</div>
<div class="page-content-section-right-img-container taille_2" rel="1984-1998">
<img src="https://fastly.picsum.photos/id/554/536/354.jpg?hmac=D-spLEtV3F0Tjf9bJcNPOFrqI2Qv6HgRkeydjD7dug8" alt="dsds">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur<br /> adipiscing elit, sed do eiusmod
</div>
</div>
<div class="page-content-section-right-img-container taille_3" rel="1984-1998">
<img src="https://fastly.picsum.photos/id/870/536/354.jpg?hmac=AMJzzUg_6QocQmkby_VWRi3LY_D7E9NcYcT_j7kJsYw" alt="dsds">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur<br /> adipiscing elit, sed do eiusmod
</div>
</div>
<div class="page-content-section-right-img-container taille_1" rel="1984-1998">
<img src="https://fastly.picsum.photos/id/436/536/354.jpg?hmac=7Tk-gHN3W43qiyfXxkZZ8VW3T4tubs1gD6xkYzifiRk" alt="dsds">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur<br /> adipiscing elit, sed do eiusmod
</div>
</div>
<div class="page-content-section-right-img-container taille_1" rel="1984-1998">
<img src="https://fastly.picsum.photos/id/256/536/354.jpg?hmac=2oqqAgYp33LoAy3nMLztmG4prUmC1bQx0M7_iG9tnsA" alt="dsds">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur<br /> adipiscing elit, sed do eiusmod
</div>
</div>
<div class="page-content-section-right-img-container taille_3" rel="1998-2021">
<img src="https://fastly.picsum.photos/id/1023/536/354.jpg?hmac=q17Uvpe-LDdjeCkEbPPP9qjcYpxVPRpzdTeloXPZaVY" alt="dsds">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur <br /> adipiscing elit, sed do eiusmod
</div>
</div>
<div class="page-content-section-right-img-container taille_3" rel="1998-2021">
<img src="https://fastly.picsum.photos/id/879/536/354.jpg?hmac=DHlAvQ-DPSPs6YaodJBSc3a9sVFzvTqygKTW1cTbFFY" alt="dsds">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur <br /> adipiscing elit, sed do eiusmod
</div>
</div>
<div class="page-content-section-right-img-container taille_1" rel="1998-2021">
<img src="https://fastly.picsum.photos/id/291/536/354.jpg?hmac=bfJIaH0FmtH4w44We3rF30m4Kd8zK4jsOAbLFVh2E20" alt="dsds">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur <br /> adipiscing elit, sed do eiusmod
</div>
</div>
<div class="page-content-section-right-img-container taille_1" rel="1998-2021">
<img src="https://fastly.picsum.photos/id/59/536/354.jpg?hmac=HQ1B2iVRsA2r75Mxt18dSuJa241-Wggf0VF9BxKQhPc" alt="dsds">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur <br /> adipiscing elit, sed do eiusmod
</div>
</div>
</div>
</div>
and 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;
}
Can anybody help me with this ? it’s possible to modify the css obvisously, the html too, and use jquery / javascript
here’s a jsfiddle :
https://jsfiddle.net/br3fqn2s/