2014-03-13 113 views
0

这是我的第一个问题,所以请原谅我,如果它是荒谬的/相当模糊。Bootstrap 3 - Affix下的顶部导航?

我一直在尝试好几天才能得到一个从底部开始的导航,然后当它滚动到的时候,类似于this网站。 所有的我已经成功至今做的是这样的:

<div id="nav" data-spy="affix" data-offset-top="443" data-offset-bottom="200"> 
     <nav class="navbar navbar-affix-top navbar" role="navigation"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="brand1" href="#why"><img src="http://dummyimage.com/228x63"></a> 
      </div> 
      <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#pourquoi">Why why why ?</a></li> 
        <li><a href="#comment">How How How</a></li> 
        <li><a href="#rdv">Action call</a></li> 
        <li><a href="#bio">Who who who</a></li> 
       </ul> 
      </div> 
     </nav> 
    </div> 

而CSS是:

.navbar-nav { 
font-size: 1.4em; 
font-family: "adelle"; 
color: #fff; 

} 




#nav.affix { 
position: fixed; 
top: 0; 
width: 100%; 
z-index:11; } 

.navbar-nav > li > a { 

color: #fff; 
text-align:center; 



} 

.navbar-nav > li > a:hover{ 

color: #59aa80; 
background-color: transparent; 
transition: 1s; 
-webkit-transition: 1s; 
-moz-transition: 1s; 
-o-transition:1s; 

} 

.navbar-nav li.active:after { 
content: " ."; 
display: block; 
text-indent: -99em; 
color: #fff; 
height: 0px; 
margin-left: -.8em; 
margin-right: auto; 
margin-top: 3px; 
position: absolute; 
left: 50%; 
width: 1px; 
text-align:center;} 
.navbar .nav .active > a { 
background-color: none; 
background: 0 !important; 
color: #FFF !important; 
box-shadow: none !important; 
-webkit-box-shadow: none !important; 
text-align:center;} 


.navbar { 
background-color: rgba(0,0,0,.7); 
box-shadow: 1px 5px 10px rgba(0,0,0,.3); 
text-align:center;} 

.navbar-header { 
padding-left: 40px; } 

我已搜查Bootply,Bootsnip等stackoverflow.com还有的jsfiddle,没有任何的运气所以如果我能得到一些帮助,我将非常感激。

回答