Javascript 视差：仅当节位于视口顶部时才激活节内容的滚动

我有几个部分，每个部分都有一个背景图像和一些内容文本、图像等。我不知道如何仅在特定部分元素位于视口顶部时滚动部分内容。这里可以看到一个例子

无法登录媒体者，以下为效果记录：

你能给我指个正确的方向吗？这是我到目前为止得到的

CSS

HTML:

---

媒体链接要求我注册。从用户体验的角度来看，这听起来像一场噩梦。有两个嵌套的可滚动元素，并在滚动时更改滚动方式。@Prinzhorn这里是指向示例的链接。请看一看！它看起来像你描述的，但简单地说，他们只是在某个点上修复背景，然后再取消修复。@Prinzhorn，可能是。背景相对于内容滚动条是视差的。此外，仅当节位于视图端口的顶部或底部时，才可以滚动。我一直在看你的“暂停”示例，但很难理解这个概念。这样的事情可以通过暂停来实现吗？

html, body {
  height:100%;
  margin: 0;
}
main#content-container {
  height: 100%;
}

section.content-block {
  height:100%;
}
section > div > .inner-content {
    position:relative;
    padding-top: 90vh;
    color: white;
    height:100%;
}
section > div.background {
  overflow: scroll;
  height: 100% !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover !important;
  height: 100%;
  width: 100%;
}

<main>
        <section class="content-block" id="section1">
          <div class="background" style="background: url(http://placekitten.com/2000/3000?image=3);" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target=".inner-content">
            <div class="inner-content container" >
              <div class="row">
                ... large content
              </div>
            </div>
          </div>
        </section>
        <section class="content-block" id="section2">
          <div class="background" style="background: url(http://placekitten.com/2000/3000?image=3);" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target=".inner-content">
            <div class="inner-content container" >
              <div class="row">
                ... large content
              </div>
            </div>

          </div>
        </section>
</main>