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

Question

我是初学者，我正在尝试为我的练习做这个。请检查这个

谁能帮我做导航栏部分和覆盖部分？

滚动时，导航栏颜色从第 1 部分发生变化，并且当我们滚动时它不会显示在叠加层上

标签： htmltwitter-bootstrapcsstwitter-bootstrap-3

Answer 1

这是我在评论部分所做的解释的代码笔

Codepen 链接

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。让我知道这就是你要找的。谢谢！