如何在具有叠加效果的背景图像上制作透明导航栏？

Question

我是初学者，我试图为我的练习做这件事。 Please check this

任何人都可以帮我做导航栏部分和叠加部分吗？

滚动导航栏颜色从第1部分更改，当我们滚动时它不会显示在叠加上

Answer 1

以下是我在评论部分

中所做解释的代码

Codepen Link

window.addEventListener('scroll', function () {
  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
        document.getElementById("nav").className = "fixed";
    } else {
        document.getElementById("nav").className = "";
    }
})

header{
  background:url("http://foundry.mediumra.re/img/home2.jpg") no-repeat center center;
  height:100vh;
  width:100%;
}
#nav{
  position:absolute;
  width:100%;
  top:0;
  text-align:center;
  color:#fff;
  font-size:40px;
  background:none;
}
#nav.fixed{
  background:#fff;
  position:fixed;
  color:#000;
  
}
.content{
  text-align:center;
  font-size:30px;
  margin:30px 0;
  
}

<div>
  <header>
    <div id="nav">
      Navigation
    </div>  
  </header>
    <section>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>       <div class="content">Test Content</div>
      <div class="content">Test Content</div>
    </section>
</div>

这是使用纯JS和CSS。让我知道这就是你要找的东西。 谢谢！