仅使用CSS避免多个粘性div重叠在一起

Question

我正在尝试创建类似下面链接的东西 https://www.msn.com/en-gb/cars/news/this-barn-find-ferrari-just-sold-for-dollar13m/ss-BBMrCrE?li=BBoPWjQ 我已经成功创建了 http://insurethe.000webhostapp.com/template.html。

我希望文本“页面上的标题空间”始终保持在顶部，并始终可见，而不会向下滚动，就像MSN搜索框一样。

当滚动时，我希望侧边栏不要重叠到文本“页面上的标题空间”。

最后，当我滚动并到达文本“页面上的标题空间必须仍然可见”时，我希望文本“页面上的标题空间”仍然可见。

此外，我不知道需要哪些CSS样式才能实现这个任务。我想知道哪些CSS样式可以删除，而不会影响上述行为。

- cyberviral

---

请下次发布源代码。 - Breton Loïc

http://insurethe.000webhostapp.com/template.html 有源代码。现在我该如何编辑问题？ - cyberviral

Answer 1

为了实现您想要的功能，您只需要对代码进行一些小的调整。

首先，您需要将整个HTML放在同一个包装器下。因此，在您的HTML中，您有两个：

   <div class="wrapper cf"></div>

你需要移除第二个，使第一个包含整个内容。然后你需要给侧边栏添加一个 CSS 命令：

    .sidebar {
      top: 110px;
    }

然后移除

   .wrapper {
       margin-bottom:200px;
   }

这里有一个可行的示例：https://codepen.io/FEARtheMoose/pen/QVEaOp?editors=1100。只需添加第二个包装器并给边栏添加 z-index：-1，这将防止边栏在到达页面底部时重叠。如您所需，请让我知道是否正常工作！编辑：按要求进行修改：将第二个包装器添加回去，并给边栏添加 z-index：-1；编辑2：刚想起来，您还需要移动标题。

   <div style="position:sticky;top:0;background:white;height:100px;text-align:center;">
      <h1 style="color:orange">HEADING SPACE IN PAGE</h1>
      <strong style="color:red">Sidebar </strong>must be always below this line
      <hr>
   </div>

将第一个包装器和 body 标签之间的内容移到中间。请参阅更新后的代码的 CodePen。[但是您需要添加 CSS 将宽度恢复到所需的状态]。

- Moose

---

是的，但现在侧边栏总是停留在右侧。我有两个“wrapper cf”的原因是为了再次实现侧边栏滚动，一旦到达“页面中的标题空间必须仍然可见”。所以基本上，我想要实现的是当我到达页面上的第二个h1时，侧边栏必须向上滚动。第一个h1必须始终在顶部。侧边栏必须在第一个h1下面滚动消失。基本上像下面的页面：https://www.msn.com/en-gb/cars/news/this-barn-find-ferrari-just-sold-for-dollar13m/ss-BBMrCrE?li=BBoPWjQ - cyberviral

谢谢。你能否解释一下你做了什么？另外，请告诉我如何使第一个H1保持粘性。现在，当我向下滚动时，粘性的H1会滚动离开。 - cyberviral

抱歉，刷新一下再看，我忘记修改了某些东西！ - Moose

基本上问题在于HTML布局。因为position: sticky使其成为父元素内的固定位置，而其他包装器将其推开，因为它们是单独的元素。因此，通过将标题移出任何一个包装器，它永远不会被推开。对于侧边栏，当第二个包装器进入视图时，您确实希望将其推开，所以这很好。然后需要做的就是1）确保侧边栏位于标题后面[z-index]并给侧边栏一个位置。所有位置命令都支持手动更改元素位置。 - Moose

这一切都有意义吗？如果我的答案对您来说是正确的解决方案，请不要忘记将其标记为正确答案。[点击赞成/反对下面的勾选框] - Moose