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

Question

让我先试着说明问题

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

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

然而，当我滚动时，我不希望在sidenav上面有空格。目前，当我向下滚动页面时，它看起来有点像

预期的行为应该是这样的

我如何在CSS中解决这个问题？我是否混淆了元素的z-index？所以当页面没有滚动时，sidenav在标题后面？或者在滚动时动态添加到sidenav的大小？

如何在css中完成这些选项？

Answer 1

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

Stack Snippet

＆＃13;

＆＃13;

sidenav

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;