Javascript 如何增加/减少固定容器内滚动元素的不透明度

我正试图用一种让我发疯的变化来重现一种类似的效果

获得与BBC网站相同的效果很容易，我已经复制了它，但我想要实现的是为固定框内滚动的元素创建淡入淡出过渡；基本上，子元素应该从

opacity:0

开始，然后在滚动的“中点”更改其不透明度直到

opacity:1

，然后在到达容器顶部时逐渐返回到

opacity:0

。
以下是我得出的结论

TL，DR： 一个简单的例子来说明我想要达到的目标

HTML 相关JS

const{
页面偏移
}=窗口
//“storyItem”是元素
//“元素”是滚动的子元素
常数{
包装纸，
元素
}=故事项；
常数{
班级名单，
偏置
}=包装；
if（classList.contains（this.fixedlementclass））{
const totalOffset=pageYOffset-offsetTop；
元素。forEach（（项目）=>{
常数{
抵消，
阴蒂
}=项目
常数[开始、中间、结束]=[
抵消，
（偏置+平衡重量/2），
（偏置+倾斜高度）
]
设setOpacity=0；
如果（总偏移量<开始|总偏移量>结束）{
setOpacity=0；
}否则{
setOpacity=（clientHeight*2-总偏移量）/clientHeight；
}
log（`Set opacity:${setOpacity}`）；
item.style.opacity=setOpacity；
})
}

但我只是在不透明度上得到了一个奇怪的行为，从0到0.7，基本上被卡住了

<header>
  <h2>JS Scroll Stories</h2>
</header>
<main id="wrapper">
  <div class="js-story">
    <div class="js-story-images">
      <div class="images-wrapper">
        <img src="https://via.placeholder.com/1440x700" />
        <img src="https://via.placeholder.com/1440x700" />
        <img src="https://via.placeholder.com/1440x700" />
        <img src="https://via.placeholder.com/1440x700" />
        <img src="https://via.placeholder.com/1440x700" />
        <img src="https://via.placeholder.com/1440x700" />
      </div>
    </div>
    <div class="js-story-elements">
      <p>Pellentesque scelerisque velit tortor. Proin.</p>
      <p>Quisque eget risus quis libero.</p>
      <p>Duis lorem magna, molestie in.</p>
      <p>Aliquam commodo convallis tellus, eu.</p>
      <p>Phasellus eu gravida est, eu.</p>
      <p>Ut non purus neque. Proin.</p>
    </div>
  </div>
</main>

div.js-story.fixed-top div.js-story-images {
  position: fixed;
  top: 0;
  bottom: inherit;
  width: 100%;
}

div.js-story div.js-story-images {
  z-index: -100;
}

div.js-story div.js-story-images div.images-wrapper {
  position: relative;
}

div.js-story div.js-story-images div.images-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

div.js-story div.js-story-elements {
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

div.js-story div.js-story-elements:before,
div.js-story div.js-story-elements:after {
  content: '';
  display: block;
  position: static;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

div.js-story div.js-story-elements p {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0;
  opacity: 0;
  position: relative;
  transition: opacity 300ms ease-in;
  background-color: red;
}

const {
  pageYOffset
} = window

// a "storyItem" is the <div class="js-story"> element
// "elements" are the children which are scrolling
const {
  wrapper,
  elements
} = storyItem;

const {
  classList,
  offsetTop
} = wrapper;

if (classList.contains(this.fixedElementClass)) {
  const totalOffset = pageYOffset - offsetTop;

  elements.forEach((item) => {
    const {
      offsetTop,
      clientHeight
    } = item
    const [start, middle, end] = [
      offsetTop,
      (offsetTop + clientHeight / 2),
      (offsetTop + clientHeight)
    ]

    let setOpacity = 0;
    if (totalOffset < start || totalOffset > end) {
      setOpacity = 0;
    } else {
      setOpacity = (clientHeight * 2 - totalOffset) / clientHeight;
    }
    console.log(`Set opacity: ${setOpacity}`);
    item.style.opacity = setOpacity;
  })
}