We have a series of css sticky divs, each with an image and some text, that are full screen on laptops, each sticking to the top (visually covering over the previous panel). But the last div does not stick, rather it keeps scrolling.
It is not an issue with the code of the last div, they are all basically the same. And if we add an additional panel or remove a panel, the same issue occurs, the last one keeps scrolling. It doesn't matter if the div is imgleft or imgright (see below).
The last sticky div is followed by some more divs, which are not css sticky and which we want to scroll.
The div code:
<div id="div7" class="imgleft">
<div class="imgblock">
<img src="img/foodie-tours.jpg">
</div>
<div class="textblock">
<div class="textwrap">
<h2>authentic regional cuisine & beverages</h2>
<p>blah blah</p>
</div>
</div>
</div>
<div id="div8" class="imgright">
<div class="textblock">
<div class="textwrap">
<h2>handpicked inns with local character</h2>
<p>blah blah</p>
</div>
</div>
<div class="imgblock">
<img src="img/boutique-hotels.jpg">
</div>
</div>
The applicable CSS:
.imgright, .imgleft {
height: 100vh;
padding: 10vw;
display: flex;
flex-direction: row;
margin: 70vh 0;
position: sticky;
top: 0;
background: #fff;
box-shadow: 0px -3px 5px rgba(255,255,255,0.95);
}
If it makes a difference, on the development page, the 1st div is sticky, the 2nd div is not, the 3rd thru 8th div are sticky, 9th and 10th div are not. Everything works as expected except the 8th div.