在标题引导程序下移动导航栏

我对引导程序非常陌生，我想知道是否有人可以提供一些建议，以便我能够将我的导航栏放在标题下。这是我的两个电流代码：在标题引导程序下移动导航栏

页眉：

 <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

在标题引导程序下移动导航栏

回答

相关问题