滚动时如何消除空白[固定侧边栏]答案

【问题标题】：How to eliminate whitespace when scrolling [fixed sidebar]滚动时如何消除空白[固定侧边栏]
【发布时间】：2018-01-15 15:45:00
【问题描述】：

我先试着说明问题

我有一个包含标题和侧导航的网页。 sidenav 在 css 中是固定的，因为滚动时我不会移动它的内容。

当页面没有向下滚动时，它会按预期工作，有点像这样

但是，当我滚动时，我不希望 sidenav 顶部有空格。目前，当我向下滚动页面时，它看起来有点像这样

预期的行为应该是这样的

如何在 css 中解决这个问题？我会弄乱元素的 z-index 吗？所以当页面不滚动时sidenav在标题后面？还是在滚动时动态添加到 sidenav 的大小？

这些选项中的任何一个如何在 css 中完成？

【问题讨论】：

请包含您的代码，并最好制作一个 sn-p / 演示（jsfiddle、codepen 等）供我们使用。谢谢
您可以将侧边栏隐藏在导航下方，但这意味着您不能在侧边栏的顶部有内容，因为当页面位于顶部时它会被隐藏。如果没问题，那可能是您最简单的解决方案
@Huangism css 怎么做？
你需要你的侧边栏位置：固定和全高，然后你的标题位置绝对具有更高的 z-index
@JonasPraem 您应该发布您的问题的最小示例，以便我们可以使用相同的代码示例解决它

标签： html css angular

【解决方案1】：

据我了解，您必须将标头的 z-index 设置为高于 sidenav

堆栈片段

.header {
  height: 100px;
  background: #000000;
  position: relative;
  z-index:999;
}

body {
  margin: 0;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0px;
  width: 100px;
  background: red;
  height: 100%;
  padding-top:100px;
}

.content {
  height: 1000px;
  background: yellow;
}

<div class="header"></div>
<div class="main">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

【讨论】：