使用 HTML 和 CSS 在滚动时创建 "overlapping" 效果

Question

晚上好，伙计们！我需要快速掌握网站的开发。

我一直在寻找一种方法，让我的网站的每个部分都滚动到最后一个部分；几乎像垂直幻灯片？我会尽我所能解释而不会使事情变得太复杂。

所以，我有一个完全覆盖视口的区域，就像这样；

header {
    width: 100vw;
    height: 100vh;
    background-color: #3498db;
}

header后面是一段内容。内容本身无关紧要，但网站由几个部分组成，像这样；

section {
    width: 100%;
    height: auto;
    overflow: auto;
    padding: 100px 0;
}

现在，这是我要达到的效果：

一旦用户滚动，header 仍然是 "fixed"，下一部分（我们称它为 a 部分 ) 在上滚动 header。然后，一旦section a遇到浏览器的顶部window，它就变粘（固定在顶部）。然后我希望 section b 执行相同的操作 - 滚动 over section a.

希望我已经足够详细地解释了我要找的东西！如果有人需要任何其他信息，例如一些代码片段或图像，请告诉我！恐怕解决方案非常简单，我现在根本看不到它。

也许我需要一双新鲜的眼睛！

此外，我想避免使用 JavaScript，因为我相当确定没有它也可以做到这一点。

非常感谢，伙计们！

Answer 1

这是可能与 position: sticky property, but sticky has very poor support. Here's the specification。

如果您关心跨浏览器支持（在大多数情况下您确实应该关心），那么您可能需要为此使用 JavaScript。

此示例仅适用于某些版本的 Firefox 和 Safari。

.header,
.part {
  padding: 10px;
  position: sticky;
  width: 100%;
  height: 100vh;
  
  top: 0;
  
  box-sizing: border-box;
}

.header {background-color: #ddd;}
.part:nth-of-type(1) {background-color: red;}
.part:nth-of-type(2) {background-color: green;}
.part:nth-of-type(3) {background-color: blue;}

<div class="header">Header</div>
<section class="part">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt rerum debitis cum nemo voluptate accusamus architecto iure eaque itaque! Dolorum distinctio numquam veritatis voluptate necessitatibus, veniam nesciunt consequuntur expedita facere sapiente eius magnam cumque perferendis laudantium eum, similique at ratione aut animi quidem labore. Dolor cumque soluta aperiam ab suscipit accusamus repudiandae quos corporis, voluptatibus, neque sequi aliquid quia quisquam voluptatum tempora possimus reiciendis ea beatae deleniti et corrupti, tempore cupiditate ullam. Mollitia expedita non, odio dolorum qui pariatur corporis eveniet iusto natus excepturi laboriosam tempore quas eligendi. Fuga omnis tempore fugit voluptas aperiam, vitae maxime ratione placeat! Blanditiis, incidunt!</section>
<section class="part">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta vero quis blanditiis nihil similique eius, ullam aliquid aspernatur. Debitis, qui quis odio deserunt, vitae corporis dicta, eveniet enim nisi eos quibusdam. Aperiam dolorem quidem ad, consequuntur quis! Adipisci natus, officiis soluta nisi iusto, aperiam blanditiis, omnis numquam dignissimos quas facilis!</section>
<section class="part">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis dolor libero officia perspiciatis vitae adipisci pariatur similique architecto veniam eum quos laboriosam laudantium sint praesentium aut, quibusdam vero amet dolores perferendis. Aperiam cumque corporis porro quo reprehenderit, dolor labore vel.</section>

使用 HTML 和 CSS 在滚动时创建 "overlapping" 效果

Create "overlapping" effect upon scroll using HTML and CSS

html

css

fixed

parallax

sticky