Question

我有几个部分，每个部分都有背景图片和一些内容（文字，图片等）。我只是在特定节元素位于视口顶部时才弄清楚如何滚动节的内容时遇到问题。可以在此处查看示例https://medium.com/@ivadenis/df823bf45a05。

那些无法登录媒体的人，这里是效果录音： http://screencast.com/t/jkQBOzlgwft

你能指出我正确的方向吗？这是我到目前为止所得到的......

CSS

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%;
}

HTML：

<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>

http://jsfiddle.net/ivadenis/VNLc8/1/

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

0 个答案: