Question

在我的网站上，我想使用一种视差效果。但通常情况下，您只需将背景图片固定在屏幕上，因此可以滚动显示背景图片。它，我想要的东西与我的所有内容都是一样的。

该网站是一页的，有几个部分。在景观屏幕上，这些部分的最小高度为100vh。如果说第1部分位于视口中，则用户应该正常滚动，直到该部分的最底部到达屏幕底部。在下一个容器进入视口的那一刻，第1部分应该是固定的，这样第2部分就像一张纸一样在第1部分上滑动，并首先覆盖底部的内容。

你知道怎么做吗？我不需要完全编码的示例，只需要了解如何执行此操作。

提前致谢。

更多细节

我认为我对我想要获得的内容的解释有点模糊，所以我会稍微扩展一下。

想象一下，你有5张纸，在每张纸上，有一些内容，让我们说关于部分，在另一张纸上有一些功能和等等。现在每张纸都有一个视口的高度，所以你看到的只是那张纸。如果内容大于您的视口，则表单也会变大。我认为这很明显。如果向下滚动页面，您看到的纸张应向上滚动，直到其末尾与视口边框匹配。现在，当滚动这张纸时，不要向上移动，而是停留在那个确切的位置。第2页上的新内容在其上滑动，就像新图层一样。

Answer 1

也许你的意思是这样的？

<main>
  <section class="orange fixed">
    <h2>
      Some text
    </h2>
  </section>
  <section class="blue">
    <h2>
      Some text
    </h2>
  </section>
  <section class="orange">
    <h2>
      Some text
    </h2>
  </section>
</main>

JS：

var $sections = $('main section');
var sectionHeight = $sections.eq(0).outerHeight();
var setCurrent = function(position ) {
    $sections.eq(position).addClass('fixed').siblings().removeClass('fixed');  
}

$(window).on('scroll', function() {
  var scTop = $(window).scrollTop();
  var position = Math.ceil( scTop / sectionHeight );
  setCurrent( position - 1 );

})

还有一些sass

body {
  margin: 0;
}

main {
  padding: 0;
  padding-top: 100vh; // this is the trick
  section {
    height: 100vh;
    text-align: center;
    color: white;
    padding-top: 200px;
    position: relative;
    margin: 0;
    h2 {
      margin: 0;
      padding: 0;
    }
    &.orange {
      background: orange;
    }
    &.blue {
      background: blue;
    }
    &.fixed { // this is the trick
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
    }
  }
}

你可以在这里测试一下

https://jsfiddle.net/3r1Lm4ha/8/（也许更新）

PS：可以改进，但仍然不知道这是否是你正在寻找的

文字

1 个答案: