javascript - Bootstrap 轮播在我的固定顶部导航上滚动

Question

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

The Site

The Repository

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>

主.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;
  }
}