透明/不透明导航栏位于具有类 "transbox" 的"div"后面

我从我网站上的主页上的背景图像开始了一些文本。我想让字母更加清晰，因此我使用类" Transbox"添加了一个不透明的盒子，并设置了它的不透明度。我不太担心文本是透明的，但是现在我设置的导航栏位于" transbox"后面，当我滚动" transbox"时，我不会单击链接，因为它坐在上面导航栏。

我已经尝试了适当设置z索引，甚至可以通过更改类和CSS代码来使其简单地使其成为一个带有一些文本的透明容器，但是问题仍然存在，并且在容器/文本放置方面出现了新问题。p>我想要的只是纳维尔(Navbar(的所有内容，因此在用户滚动通过页面时，在任何情况下都不涵盖和无法使用。我很好奇这是否是不透明度的错误，是否使用错误类型的类，或者是否完全不同。

$(window).on('scroll', function(){
    if($(window).scrollTop()){
      $('nav').addClass('black');
      $('header').addClass('black');
      $('header .logo img').addClass('black');
      $('header ul').addClass('black');
      $('header a').addClass('black');
    }
    else
    {
      $('nav').removeClass('black');
      $('header').removeClass('black');
      $('header .logo img').removeClass('black');
      $('header ul').removeClass('black');
      $('header a').removeClass('black');
    }
  })

header{
  background: #35424a;
  color: #ffffff;
  z-index: 999;
}
header.black{
  z-index: 999;
}
header a{
  color: #5ff5a3;
  text-decoration: none;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  text-transform: uppercase;
  padding: 5px 20px;
  font-size: 16px;
  transition: .5s;
}
header a.black{
  color: #ffffff;
  font-size: 14px;
}
header ul{
  float: right;
  padding: 68px 50px 0 10px;
  display: flex;
  transition: .5s;
}
header ul.black{
  padding: 40px 10px 0 10px;
}
header li{
  float: left;
  display: inline-block;
  box-sizing: border-box;
  padding: 1px;
  transition: .5s;
}
header nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: .5s;
}
header nav.black{
  background: rgba(0,0,0,.8);
  color: #000000;
}
header .current a, header a:hover{
  color: #ffffff;
  background: #000000;
  font-weight: bold;
  border: 1px solid #ffffff;
  transition: .5s;
}
header .logo img
{
  width: 500px;
  padding: 0px 50px;
  height: auto;
  float: left;
  transition: .5s;
}
header .logo img.black
{
  width: 300px;
  padding: 0px 20px;
}
#showcase{
  min-height: 1000px;
  background: url(../img/showcaseimg.jpg) no-repeat 0 -200px;
  background-size: cover;
  background-position: center;
  text-align: center;
  color: #ffffff;
}
#showcase h1{
  font-size: 55px;
  color: #ffffff;
  padding: 0px 20px;
}
#showcase p{
  font-size: 20px;
  color: #ffffff;
  padding: 0px 20px 20px;
}
#showcase .transbox{
  margin-top: 700px;
  margin-bottom: 10px;
  background-color: #000000;
  opacity: 0.6;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
      <div class="container">
        <nav>
          <div class="logo">
            <img src="./img/creativecs_logo.png">
          </div>
          <ul>
            <li class="current"><a href="#">HOME</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">PRODUCTS</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">CONTACT</a></li>
            <li><a href="#">NEWS</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <section id="showcase">
      <div class="container">
        <div class="transbox">
          <h1>Custom PC solutions for anyone and everyone.</h1>
          <p>Designed by engineers. Tested by enthusiasts. Check out what CreativeCS has to offer you.</p>
        </div>
      </div>
    </section>

header {
position:relative;
z-index: 999;}
#showcase {
position:relative;
z-index: 1;
}

 var x =  document.getElementsByTagName("*")
      for(var i = 0; i< x.length; i++){
          x[i].addEventListener("click", function(e){
            alert(e.target.tagName)
          })
      }