如何只让 div 的一部分变成粘性的？

Question

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

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>

如何只让 div 的一部分变成粘性的？

How to make only part of div sticky?

html

css

position

sticky