在標題引導程序下移動導航欄

我對引導程序非常陌生，我想知道是否有人可以提供一些建議，以便我能夠將我的導航欄放在標題下。這是我的兩個電流代碼：在標題引導程序下移動導航欄

頁眉：

 <div class="row"> 
      <div class="col-lg-12"> 
       <div class="intro-message"> 
        <h1>HOST</h1> 
        <h3>two is better than one</h3> 
        <hr class="intro-divider"> 
        <ul class="list-inline intro-social-buttons"> 
         <li> 
          <a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a> 
         </li> 
         <li> 
          <a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a> 
         </li> 
         <li> 
          <a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 

    </div>

導航欄：

<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation"> 
     <div class="container topnav"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <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="navbar-brand topnav" href="/">Host</a> 
      </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="#">Login</a> 
       </li> 
       <li> 
        <a href="#">Sign up</a> 
       </li> 
      </ul> 

      <form class="navbar-form navbar-right" role="search"> 
       <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 

     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav>

任何一種建議和提示將不勝感激。我對編程也相當陌生，所以很好的解釋一路走來！ =）

來源

2015-07-12 Nappstir

只要改變

navbar-fixed-top

到導航欄頂部

編輯了第二個答案：

更改到

<nav id="myNav" class="navbar navbar-default" role="navigation">

而且你將需要添加jQuery的參考和這個小腳本。

var headerHeight = 200; 

$(window).bind('scroll', function() { 
if ($(window).scrollTop() > headerHeight) { 
    $('#myNav').removeClass('navbar-top'); 
    $('#myNav').addClass('navbar-fixed-top'); 
} else { 
    $('#myNav').removeClass('navbar-fixed-top'); 
    $('#myNav').addClass('navbar-top'); 
} 
});

基本上這是做什麼檢查你有多少滾動從頂部和當你通過你的標題高度它修復導航保持在上面。您只需將headerHeight值更改爲標題高度即可。

來源

2015-07-12 07:39:14 luk492

工作完美！但是，我確實希望導航欄在您向下滾動時保持在頂部。一個例子是如果你去twitter的着陸頁（twitter.com）。他們在標題下方有那個導航欄，但是當您向下滾動時，導航欄會停留在頂部。儘管如此，我感謝你的幫助！ – Nappstir

我編輯了我的答案以適合你的第二個問題。 – luk492

@ luck492我以爲我可能不得不使用jquery，這是我尚未掌握的東西。我會在下週的某個時候看看。現在，我將與您的第一個建議合作，然後嘗試並實施您提供的新代碼。我非常感謝您花時間回答我的問題並解釋一些事情。 – Nappstir

<!DOCTYPE html> 
<html > 
    <head> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <style> 
.navbar-fixed-top{ 

position:static; 

} 
</style> 
    </head> 

    <body> 
<div class="row"> 
      <div class="col-lg-12"> 
       <div class="intro-message"> 
        <h1>HOST</h1> 
        <h3>two is better than one</h3> 
        <hr class="intro-divider"> 
        <ul class="list-inline intro-social-buttons"> 
         <li> 
          <a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a> 
         </li> 
         <li> 
          <a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a> 
         </li> 
         <li> 
          <a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
</div> 


    <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation"> 
     <div class="container topnav"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <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="navbar-brand topnav" href="/">Host</a> 
      </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="#">Login</a> 
       </li> 
       <li> 
        <a href="#">Sign up</a> 
       </li> 
      </ul> 

      <form class="navbar-form navbar-right" role="search"> 
       <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 

     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 


    </body> 
</html>

來源

2015-07-12 08:23:27

在標題引導程序下移動導航欄

回答

相關問題