Question

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

我一直在寻找一种方法，允许我的网站的每个部分滚动到最后一个;几乎像垂直幻灯片？我会尝试尽可能地解释，而不要让事情太复杂。

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

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

然后标题后跟一段内容。内容本身是无关紧要的，但网站由几个部分组成，如此;

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

现在，这是我想要实现的效果：

用户滚动后，标题保持“固定”状态，下一部分（让我们称之为部分）滚动结束头。然后，一旦部分符合浏览器窗口的顶部，它就会变粘（固定在顶部）。然后，我希望 b部分执行相同的操作 - 滚动部分。

希望我已经设法用足够的细节来解释我正在寻找的东西！如果有人需要任何其他信息，如一些代码片段或图像，请告诉我！我担心解决方案非常简单，我现在根本无法看到它。

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

另外，我想避免使用JavaScript，因为我很确定没有它就可以完成。

非常感谢，伙计们！

Answer 1

可以使用position: sticky属性，但sticky非常poor support。这是specification。

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

此示例仅适用于某些版本的Firefox＆amp; Safari浏览器。

＆＃13;

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

＆＃13;

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

＆＃13;

使用HTML和CSS滚动时创建“重叠”效果

1 个答案: