javascript - 滚动固定部分

Question

探索网络，我在这个网站上发现了这个惊人的效果http://www.guglieri.com/(滚动效果)我想构建一个脚本来重现相同的效果，但我不明白其中的逻辑行为。

基本上，我开始计算 body 高度，将每个部分的位置属性设置为“绝对”，并将 body 高度与每个部分的高度相加。

现在，我的想法是将每个偏移量保存到一个数组中，当 scrolltop 主要或等于此偏移量时......我开始通过 translateY 属性将部分移动到顶部，当它是时我停止移动等于视口(viewport)的高度。但现在我卡住了!!

我用谷歌搜索了一个已经存在的插件，但我没有找到任何东西。所以请帮我找到解决方案；)

这里的概念:

var
  body = $('body')
  section = $('section');
section.each(function(i,el){
  $(el).css({
    'z-index' : section.length - i
  })
  body.height(body.height()+$(el).height());
});

body {
  margin: 0;
}
section {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  font-family: sans-serif;
}
section.a {
  background-color:indianred
}
section.b {
  background-color:royalblue
}
section.c {
  background-color:deepskyblue
}
section.d {
  background-color:tomato;
}

section div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  font-size: 6em;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<section class="a">
  <div>a</div>
</section>
<section class="b">
  <div>b</div>
</section>
<section class="c">
  <div>c</div>
</section>
<section class="d">
  <div>d</div>
</section>

Answer 1

这是视差效果。

这是一个简单的视差脚本:http://pixelcog.github.io/parallax.js/

网络上还有其他更多脚本以及关于如何根据需要制作自己的视差效果的教程。