Bootstrap轮播滚过我的固定顶部导航

Question

我有一个固定的顶部导航我正在做的个人网站。 我在这下面添加了一个相当大的引导旋转木马，但是当我向下滚动旋转木马滚过隐藏导航的标题时。 我已经链接到github页面上托管的站点版本，并在下面包含一些相关的代码片段以及指向存储库的链接。 提前感谢您提供的任何帮助。

网站

存储库

的index.html

<header>
  <div class="header">
    <div class="wrapper">
      <span class="jamie">JT</span>
      <div class="nav-wrapper">
        <nav class="nav">
          <a href="#">Home</a>
          <a href="#">Bio</a>
          <a href="#">Contact</a>
          <img src="" alt="twit">
          <img src="" alt="insta">
          <img src="" alt="face">
          <img src="" alt="tube">
          <img src="" alt="spot">
        </nav>
      </div>
    </div>
  </div>
</header>
<div class="car-wrapper  banner">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="images/banner.png" alt="Los Angeles">
      </div>

      <div class="item">
        <img src="images/filler.png" alt="Chicago">
      </div>

      <div class="item">
        <img src="images/filler2.png" alt="New York">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Main.scss

header {
  position: fixed;
  top:0px;
  margin:auto;
  z-index: 99999;
  width:100%;
}

.header {
  height: 80px;
  .wrapper {
    padding-top: 30px;
  }
  a {
    font-family: 'Work Sans', sans-serif;
  }
}

.nav-wrapper {
  float: right;
}
.nav {
  a {
    color: $white;
    font-size: 16pt;
    letter-spacing: -.05em;
    margin-right: 3em;
    padding-bottom: 20px;
    display: inline-block;
  }
}
.banner {
  margin-top: 80px;
}
.carousel-inner {
   height: 650px;
   .item, img{
       height: 100% !important;
       width:  100% !important;
   }
}

Answer 1

我认为你的例子工作得很好。 只是你的导航本身没有背景颜色，链接是白色的，与旋转木马融为一体。

你看到的黑色是身体本身的颜色，这就是为什么它在滚动时会消失的原因。

尝试在此课程上添加颜色

.header {
  height: 80px;
  background: blue; /* test */
  .wrapper {
    padding-top: 30px;
  }
  a {
    font-family: 'Work Sans', sans-serif;
  }
}

Answer 2

您只需要在header类中使用背景颜色

像这样

.header {
    height: 80px;
    background: #000;
}

其他的事情都很好。

希望这会对你有所帮助:)

Answer 3

要在顶部使用固定导航栏，请使用bootstrap的导航栏

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>