Question

嗨，有没有一种简单的方法可以防止固定侧边栏在页脚或特定元素上滚动？我尝试根据不同的视口高度将其从固定更改为绝对，但我的应用程序嵌套在许多位置相关元素中，所以我还没有设法让它工作。

询问我是否需要澄清任何事情。

先谢谢了，埃里克

Answer 1

因为元素是 fixed，因此在正常页面流之外，您可以 z-index 指定一个元素是在另一个元素之上还是之下。

在您的情况下，您可以像这样将它与 z-index: -1; 一起使用，以便将其定位在元素后面。

const SideBar = styled("div")`
  background-color: green;
  height: calc(100vh);
  width: 50px;
  position: fixed;
  z-index: -1;
`;

如果这导致侧边栏消失在所有内容后面，您还可以使用 z-index 设置页脚上的 position: relative; 以使其工作。像下面的CSS：

const Footer = styled("div")`
  background-color: blue;
  height: 200px;
  position: relative;
  z-index: 1;
`;