如何在相对div中创建固定元素，仅在该div可见时显示

Question

对于客户，我必须编写一个网站（一个寻呼机），其中多个部分一个在另一个之下。在视口中间的右侧应该是每个部分的标题。它应该在视口中居中（固定），当您滚动浏览网站时，标题应相互替换。我很难解释所以我会附上一些草图。

我想要实现的目标

我已经认为我使用以下代码：

＆＃13;

＆＃13;

@media

＆＃13;

.section {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  overflow: hidden;
}

.title {
  position: absolute;
}

.title-inner {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

＆＃13;

＆＃13;

但这仅适用于Safari，而不适用于Chrome / Firefox。所有的标题都明显地堆叠在一起。这有点意义，因为固定元素据我所知创建了一个新的堆叠上下文。下面的图片看看我的意思。

我实际获得的内容（Chrome / Firefox）

有人可以告诉我如何实现我的需求吗？即使我必须使用JavaScript。

非常感谢！