header - 滚动时如何使内容不在固定导航栏下方？

Question

我有一个固定在顶部的透明导航栏。滚动时，我希望页面内容不显示在导航栏下，但同时，我希望不可滚动的背景图像在导航栏下可见。

目前只有导航栏的代码：

#navbar {
  position: fixed;
  top: 0px;
  background-color: green;
  width: 100%;
  align-items: center;
  display: flex; 
} 

希望这是有道理的。

标签： headernavbartransparent