Bootstrap旋轉木馬滾動我的固定頂部導航

我有一個固定的頂部導航爲我正在做的個人網站。我在其下添加了一個相當大的引導程序傳送帶，但是當我向下滾動旋轉木馬滾動瀏覽隱藏導航的標題時。我已經把一個鏈接到github頁面上託管的網站的一個版本，並在下面包含了一些相關的代碼片段以及一個到版本庫的鏈接。提前感謝您提供的任何幫助。Bootstrap旋轉木馬滾動我的固定頂部導航

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

來源

2017-08-08 Harry Zumwalt

我覺得你爲例e工作正常。只是你的導航本身沒有背景色，鏈接是白色的，與旋轉木馬混合。

你看到的黑色是身體本身的顏色，這就是它在滾動時會消失的原因。

嘗試此類

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

來源

2017-08-08 06:50:55 dee

添加顏色要對上面用引導的導航欄固定的導航欄

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

來源

2017-08-08 06:52:02

你只是需要背景顏色在您的header類

像這樣

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

其他的東西工作正常。

希望這會幫助你:)

來源

2017-08-08 06:52:25

Bootstrap旋轉木馬滾動我的固定頂部導航

回答

相關問題