html - 在背景图像上滚动时，导航栏变得半透明且不活动

Question

当滚动到仅包含背景图像的部分时，导航栏会变为半透明且不活动。

我希望导航栏保持事件状态，同时在整个网站中保持其样式。

我在这里只使用 HTML 和 CSS。如果我包含 css，StackOverflow 不会让我发帖，因为它说代码太多。

有人可以帮我弄清楚为 CSS 编写什么来解决这个问题吗？

我只在 fiddle 中包含了相关代码。

fiddle : https://jsfiddle.net/makemommaproud/7q8pxg76/

 <header>
   <div class="container">
     <div id="branding">
       <h1>Name</h1>
     </div>
     <nav role="navigation" class="navbar">
       <ul>
         <li><a href="#about">About</a></li>
         <li><a href="#portfolio">Portfolio</a></li>
         <li><a href="#contact">Contact</a></li>
       </ul>
     </nav>
   </div>
  </header>

Answer 1

将展示柜中的不透明度更改为 1:

#showcase{
    min-height: 500px;
    padding-top:;
    background:url("http://travel.home.sndimg.com/content/dam/images/travel/fullset/2015/08/03/top-florida-beaches/key-west-beach-florida.jpg.rend.hgtvcom.966.725.suffix/1491580836931.jpeg") no-repeat 0;
    text-align: center;
    color: white;
    opacity: 1;
}

另一种选择是在标题中添加 z 索引:

header{
    background: white;
    color: #282e34;
    padding-top: 0px;
    min-height: 50px;
    border-bottom: black px solid;
    box-shadow: 0 1px 3px 1px #666;
    position: fixed; /* Added for fixed navbar */
    width: 100%; /* Added for fixed navbar */
    z-index: 100;
}