如何仅使div的一部分具有粘性

Question

我希望在一个可以滚动的段落中只添加几个字母。我做了一把小提琴来说明这个概念，理想情况下，所有红色的文本滚动，而蓝色是粘性的。非常感谢您的帮助，谢谢！

div {
color: red;
text-align: right;
font-size: 3rem;
}
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
top: 4.5rem;
bottom: 0;
text-align: right;  
color: blue;
background-color: transparent;
padding: inherit;
font-size: 3rem;
z-index: 999;
}

<br><br><br>
<div>1 1 1 1 1 1</div>
<div>2 2 2 2 2 2</div>
<div class="sticky">3 3 3 
<span style="color: red">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>

https://jsfiddle.net/35qfws0c/2/

Answer 1

一个需要内容复制的想法。诀窍是让两条相似的线在彼此上方，然后交替隐藏其中的元素：

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>