Twitter中的多个固定顶部导航栏标题Bootstrap 3 [英] Multiple fixed top navbar headers in Twitter Bootstrap 3

问题描述

• Bootstrap 3.02

我想有2个固定到顶部navbars similair如何Joomla！ 3实现其浏览屏幕。

然后，一旦您滚动导航栏＃2与顶部的对齐：

我看过： p>

• Bootstrap 3多个导航栏


• https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/aAGJKArh-8E

但尝试多个片段我无法让这个工作。谁可以帮助一个在jsFiddle的工作演示？

解决方案

代码是使用两个 navbars 和 affix 的基本开始。 / p>

HTML

 < nav class =navbar navbar-default navbar-fixed-toprole =navigation> 
< div class =container> 
< div class =navbar-header> 
< a class =navbar-brandhref =＃> Brand< / a> 
< / div> 
< div class =collapse navbar-collapseid =bs-example-navbar-collapse-1> 
< ul class =nav navbar-nav> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdown>下拉< b class =caret>< / b>< / a> 
< ul class =dropdown-menu> 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>另一项操作< / a>< / li> 
< li>< a href =＃>这里还有其他内容< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>分隔的链接< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>一个单独的链接< / a>< / li> 
< / ul> 
< / li> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdown>下拉< b class =caret>< / b>< / a> 
< ul class =dropdown-menu> 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>另一个操作< / a>< / li> 
< li>< a href =＃>这里还有其他内容< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>分隔的链接< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>一个单独的链接< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< / div> 
< / div>< ;!  -  /.container-fluid  - > 
< / nav> 
< div class =divide-nav> 
< div class =container> 
< p class =divide-text>有些文字在这里< / p> 
< / div> 
< / div> 
< nav class =navbar navbar-default navbar-lowerrole =navigation> 
< div class =container> 
< div class =collapse navbar-collapse collapse-buttons> 
< form class =navbar-form navbar-leftrole =search> 
< button class =btn btn-success> Button< / button> 
< button class =btn btn-default> Button< / button> 
< button class =btn btn-default> Button< / button> 
< button class =btn btn-default> Button< / button> 
< / form> 
< / div> 
< / div> 
< / nav> 
< div class =container> 
< div class =row> 
< div class =filler>< / div> 
< / div> 
< / div> 
  

CSS

  body {
 margin-top：50px; 
} 
 
 .divide-nav {
 height：50px; 
 background-color：＃428bca; 
} 
 
 .divide-text {
 color：#fff; 
 line-height：20px; 
 font-size：20px; 
 padding：15px 0; 
} 
 
 .affix {
 top：50px; 
 width：100％; 
} 
 
 .filler {
 min-height：2000px; 
} 
 
 .navbar-form {
 padding-left：0; 
} 
 
 .navbar-collapse {
 padding-left：0; 
} 
  

JavaScript

  $（'。navbar-lower'）。affix（{
 offset：{top：50} 
}）; 
  

• Bootstrap 3.02

I would like to have 2 fixed to top navbars similair to how Joomla! 3 implements their browse screen.

And then once you scroll navbar #2 butts up against the top one:

I have looked at:

• Bootstrap 3 multiple navbars
• https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/aAGJKArh-8E

but trying multiple snippets I cannot get this to work. Can anyone help with a working demo in jsFiddle?

解决方案

The code below is a basic start using two navbars and affix.

HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div><!-- /.container-fluid -->
</nav>
<div class="divide-nav">
  <div class="container">
    <p class="divide-text">Some Text Here</p>
  </div>
</div>
<nav class="navbar navbar-default navbar-lower" role="navigation">
  <div class="container">
    <div class="collapse navbar-collapse collapse-buttons">
      <form class="navbar-form navbar-left" role="search">
        <button class="btn btn-success">Button</button>
        <button class="btn btn-default">Button</button>
        <button class="btn btn-default">Button</button>
        <button class="btn btn-default">Button</button>
      </form>
    </div>
  </div>
</nav>
<div class="container">
  <div class="row">
    <div class="filler"></div>
  </div>
</div>

CSS

body{
  margin-top: 50px;
}

.divide-nav{
  height: 50px;
  background-color: #428bca;
}

.divide-text{
    color:#fff;
    line-height: 20px;
    font-size:20px;
    padding: 15px 0;
}

.affix {
  top: 50px;
  width:100%;
}

.filler{
  min-height: 2000px;
}

.navbar-form {
   padding-left: 0;
}

.navbar-collapse{
   padding-left:0; 
}

JavaScript

$('.navbar-lower').affix({
  offset: {top: 50}
});

这篇关于Twitter中的多个固定顶部导航栏标题Bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！