One idea that requires a content duplication. The trick is to make two similar lines above each other and you hide elements inside them alternately:
div {
color: red;
text-align: right;
font-size: 3rem;
}
.sticky {
position: sticky;
top: 4.5rem;
bottom: 1em; /* bigger than 0 since the element is having height=0 */
text-align: right;
color: blue;
background-color: transparent;
padding: inherit;
font-size: 3rem;
z-index: 999;
height:0; /* this will make them above each other */
}
.sticky > *:not(.main) {
visibility:hidden;
}
.dupe > .main {
visibility:hidden;
}
<br><br><br>
<div>1 1 1 1 1 1</div>
<div>2 2 2 2 2 2</div>
<div class="sticky"><span class="main">3 3 3</span> <span>4 4 4</span> </div>
<div class="dupe"><span class="main">3 3 3</span> <span>4 4 4</span> </div>
<div>5 5 5 5 5 5</div>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
CLICK HERE to find out more related problems solutions.