求助：实现滚动时左右栏对应时间段区块的粘性切换功能

阿华AIGC实验室

2026-4-15

在我的网站页面中，有两个子div：.page-biography-section-right-sub-section-left 和 .page-biography-section-right-sub-section-right，它们被包含在使用Flexbox布局的父div .page-biography-section-right 中。

在后台我有3个内容块，对应三个时间段：1944-1984、1984-1998、1998-2001。每个块包含一个文本字段和一个图片 repeater 字段。

前端布局需求

左侧栏（.page-biography-section-right-sub-section-left）中，3个文本块要放在 .biography-bloc-text 容器内垂直堆叠，分别对应ID _1944-1984、_1984-1998、_1998-2021。
右侧栏（.page-biography-section-right-sub-section-right）中，图片要放在 .page-content-section-right-img-container 容器内垂直堆叠，每个容器有 rel 属性关联对应的文本块（比如 rel="1944-1984"），和左侧文本块一一对应。

交互行为需求

我想要实现的核心交互逻辑：

页面加载时，左侧栏的第一个 .biography-bloc-text 文本块是粘性定位的；右侧栏的 .page-content-section-right-img-container 容器在滚动到视口顶部时变为粘性定位。
当与第一个文本块关联的最后一个图片容器滚动完成后，第一个文本块取消粘性，下一个 .biography-bloc-text 变为粘性；右侧图片容器保持同样的粘性逻辑，以此类推处理三个文本块和对应图片。
向上滚动时，行为反转：只有当关联的图片容器在视口中可见时，对应的文本块才会保持粘性。

现有代码

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;
}

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>

目前我已经实现了基础的布局和粘性定位，但还没完成上述的滚动切换逻辑。请问有没有人能帮我实现这个交互？我可以修改CSS、HTML，也可以使用jQuery/JavaScript来完成。

备注：内容来源于Stack Exchange，提问作者mmdwc