滚动时身体一直到导航栏

Question

我的导航栏有问题，当我尝试滚动时，主体一直在徽标后面。参考下图：

无论如何我可以在滚动时让身体消失吗？最好在红线之前消失。

抱歉我的英语不好，如果问题可能有点愚蠢。开发新手，仍在学习中:)

这是我的导航栏 CSS 代码：

#header {
  height: 100px;
  transition: all 0.5s;
  z-index: 997;
  transition: all 0.5s;
  background: rgba(42, 44, 57, 0.9);
}

#header.header-transparent {
  background: transparent;
}

#header.header-scrolled {
  background: #fff;
}

#header .logo h1 {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
}

Answer 1

您是否尝试过更改导航栏的背景颜色：

#header {
  height: 100px;
  transition: all 0.5s;
  z-index: 997;
  transition: all 0.5s;
  background: white;
}

#header.header-transparent {
  background: transparent;
}

#header.header-scrolled {
  background: #fff;
}

#header .logo h1 {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
}