Javascript jQuery基于滚动百分比设置translateY动画

我试图在没有任何插件的情况下构建一个简单的重叠“视差”效果。我的html格式如下：

<section>
    <h2>Example Text</h2>
</section>
<section>
    <h2>Example Text</h2>
</section>
<section>
    <h2>Example Text</h2>
</section>
<section>
    <h2>Example Text</h2>
</section>
<section>
    <h2>Example Text</h2>
</section>

---

这里有一条路。如果您愿意，可以随意优化它

$（函数（）{
$（'section'）。每个（函数（）{
var off=$（this）.offset（）.top
$（此）.data（'orig-offset'，off）；
});
$（窗口）。滚动（函数（）{
var scrollTop=$（窗口）.scrollTop（）；
$（'section'）。每个（函数（）{
var off=$（this）.data（'orig-offset'）；
如果（滚动顶部>=关闭）{
var translate=（滚动顶部关闭）/$（窗口）.height（）*100；
console.log（翻译）；
$（this.css（{transform:'translateY（'+translate+'%）'）}）；
}
});
});
});
html，正文{
身高：100%；
保证金：0；
}
氢{
保证金：0；
文本对齐：居中；
}
部分{
背景：#000；
身高：100%；
宽度：100%；
位置：相对位置；
排名：0；
}
章节：第一类{
背景颜色：珊瑚；
}
截面：第n种类型（2）{
背景颜色：浅绿色；
}
截面：第n种类型（3）{
背景颜色：浅蓝色；
}
第n节类型（4）{
背景色：#ffff6e；
}
截面：第n种类型（5）{
背景色：#3c；
颜色：白色；
}

一些文本
一些文本
一些文本
一些文本
一些文本
谢谢。你的回答帮助我非常接近我的目标。我已经更新了我的问题，包括我当前的进度和一个小问题。将
if（scrollTop>off）
更改为
if（scrollTop>=off）
。我应该意识到这一点。如果你想用我的最终代码更新你的答案，我会接受，因为它在很大程度上是基于你的答案。我用你的最终代码更新了我的答案，但使用了第n个类型而不是第n个子类型，因为所需的脚本include导致它失败。
$(function(){
  $('section').each(function() {
    var off = $(this).offset().top
    $(this).data('orig-offset', off);
  });
  $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();

    $('section').each(function(){
      var off = $(this).data('orig-offset');
      var translate =  (scrollTop - off) / $(window).height() * 100;
      if (scrollTop >= off) {
        $(this).css({transform: 'translateY(' + translate +'%)'});
      }
    });
  });
});