引导轮播在我的固定顶部导航上滚动答案

【问题标题】：Bootstrap carousel scrolls over my fixed top nav引导轮播在我的固定顶部导航上滚动
【发布时间】：2018-01-15 14:11:27
【问题描述】：

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

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>

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

【问题讨论】：

标签： javascript html css twitter-bootstrap sass

【解决方案1】：

您只需要在 header 类中设置背景颜色

这样

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

其他一切正常。

希望对你有帮助:)

【讨论】：

【解决方案2】：

要在顶部有一个固定的导航栏，请使用引导程序的导航栏

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

【讨论】：

【解决方案3】：

我认为您的示例运行良好。只是您的导航本身没有背景颜色，并且链接是白色的，与轮播融为一体。

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

尝试在这个类上添加颜色

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

【讨论】：