防止固定侧边栏菜单滚动到页脚

【问题标题】：Prevent fixed sidebar menu to scroll over footer防止固定侧边栏菜单滚动到页脚
【发布时间】：2021-05-28 16:18:38
【问题描述】：

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

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

先谢谢了，埃里克

【问题讨论】：

【解决方案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;
`;

【讨论】：