html - 无法让我的导航越过在翻转时淡入的头部

Question

我在一个网站上工作，我需要一个基本上是透明框的标题，当你滑过它时会淡入(见 horizo​​nsupply.co)。到目前为止，我已经成功创建了标题和 Logo ，并且效果很好，但是当我尝试放入导航时，它要么位于淡入框下方，不允许单击链接(我正在使用 z -index's )或者如果我将导航的 z-index 设置为高于淡入框所在位置的数字，则它不允许该框在滚动时淡入。希望这是有道理的。基本上，我正在尝试重现 horizo​​nsupply.co 正在发生的事情。

这是我的 html:

<div id="logo" >
    <img src="images/weblogo.png" alt="weblogo">
</div>

<div id="navigation" class="clearfix">
    <div id="navlinks"> 
        <ul>
            <a href="#"><li>ABOUT</li></a>
            <a href="#"><li>EPISODES</li></a>
            <a href="#"><li>CONTACT</li></a>
        </ul>
    </div>
</div>

<div id="header"></div>

<div id="main" class="clearfix">
    <img src="images/1415210745666.jpeg" alt="1415210745666" width="100%" height="675">

    <div id="content">
        <div id="episodebox"></div>
        <div id="episodebox2"></div>
        <div id="episodebox3"></div>
    </div>
</div>

这是我的 CSS:

#header{
    width:100%;
    height:205px;
    background-color:#2D2D2D;
    position:absolute;
    z-index:1;

     opacity: 0; /* Change this to .5 for 50% opacity */
    -webkit-transition: .5s;
       -moz-transition: .5s;
        -ms-transition: .5s;
         -o-transition: .5s;
            transition: .5s;    
}

#header:hover {
     opacity: 0.87;
}

#body{
    background-color:#ffffff;
}

.img{
     max-width:100%; 
     max-height:100%;
}

#logo{
     position:absolute;
     width:auto;
     height:auto;
     padding-left:25px;
     padding-top:10px;
     z-index:3;
}

#navigation.clearfix{
    position:absolute;
    width:100%;
    height:auto;
    padding-top:160px;
    padding-left:15px;
    z-index:1;
    clear:both;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top:auto;
    margin-bottom:auto;
}

li{
    display:block;
    float:left;
    padding:1%;
}

a:link {
    text-decoration: none;
    color: #F46969;
    font-family: 'Roboto', sans-serif;
    font-weight:500;
}

#main.clearfix{
    clear:both;
}

#content{
    width:960px;
    height:900px;
    margin-left:auto;
    margin-right:auto;
    background-color:#ffffff;
    margin-top:150px;
}

#episodebox{
    width:270px;
    height:50px;
    background-color:#ffa9a9;
    margin-left:37px;
    margin-right:18px;
    float:left;
}

#episodebox2{
    width:270px;
    height:50px;
    background-color:#ffa9a9;
    margin-left:18px;
    margin-right:18px;
    float:left;
}

#episodebox3{
    width:270px;
    height:50px;
    background-color:#ffa9a9;
    margin-left:18px;
    margin-right:37px;
    float:left;
}

Answer 1

有很多方法，最简单的解决方案之一是用标题 div 包装整个内容( Logo 、链接等)，然后操作 background-color 而不是 不透明度。

#header {
  width: 100%;
  height: 205px;
  background-color: transparent;
  position: absolute;
  z-index: 1;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}
#header:hover {
  background-color: rgba(45, 45, 45, .85);
}
#body {
  background-color: #ffffff;
}
.img {
  max-width: 100%;
  max-height: 100%;
}
#logo {
  position: absolute;
  width: auto;
  height: auto;
  padding-left: 25px;
  padding-top: 10px;
  z-index: 3;
}
#navigation.clearfix {
  position: absolute;
  width: 100%;
  height: auto;
  padding-top: 160px;
  padding-left: 15px;
  z-index: 1;
  clear: both;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-top: auto;
  margin-bottom: auto;
}
li {
  display: block;
  float: left;
  padding: 1%;
}
a:link {
  text-decoration: none;
  color: #F46969;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}
#main.clearfix {
  clear: both;
}
#content {
  width: 960px;
  height: 900px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  margin-top: 150px;
}
#episodebox {
  width: 270px;
  height: 50px;
  background-color: #ffa9a9;
  margin-left: 37px;
  margin-right: 18px;
  float: left;
}
#episodebox2 {
  width: 270px;
  height: 50px;
  background-color: #ffa9a9;
  margin-left: 18px;
  margin-right: 18px;
  float: left;
}
#episodebox3 {
  width: 270px;
  height: 50px;
  background-color: #ffa9a9;
  margin-left: 18px;
  margin-right: 37px;
  float: left;
}

<div id="header">
  <div id="logo">
    <img src="http://placekitten.com/g/50/50" alt="weblogo">
  </div>

  <div id="navigation" class="clearfix">
    <div id="navlinks">
      <ul>
        <a href="#">
          <li>ABOUT</li>
        </a>
        <a href="#">
          <li>EPISODES</li>
        </a>
        <a href="#">
          <li>CONTACT</li>
        </a>
      </ul>
    </div>
  </div>

</div>

<div id="main" class="clearfix">
  <img src="http://placekitten.com/g/700/700" alt="1415210745666" width="100%" height="675">

  <div id="content">
    <div id="episodebox"></div>
    <div id="episodebox2"></div>
    <div id="episodebox3"></div>
  </div>
</div>