将内容/横幅放在"固定顶部导航栏"上方

Question

我想在Bootstrap 的固定顶部导航栏上放置横幅.我的目标是使用导航栏作为操作导航并在其上方放置项目的横幅.如果在滚动的情况下导航栏总是在那里会很酷,但横幅消失会更好.

我怎样才能实现这一点,任何例子？

Answer 1

诀窍在于使用affix,然后你不一定需要把横幅放在<header>.

CSS:

#topnavbar {
    margin: 0;
}
#topnavbar.affix {
    position: fixed;
    top: 0;
    width: 100%;
}

JS:

$('#topnavbar').affix({
    offset: {
        top: $('#banner').height()
    }   
});

HTML:

<div class="container" id="banner">
  <div class="row">
      <h1> Your banner </h1>
  </div>
</div>

<nav class="navbar navbar-default navbar-static-top" role="navigation" id="topnavbar">
   ...
</nav>

查看bootstrap 3.1.1中的演示.

Answer 2

为了响应 Skelly 的解决方案，我不建议使用 bootstrap 的网格系统来设置标题样式。原因是，在移动设备上，即使使用“hidden-sm”，这也会产生不必要的行分隔或不需要的间距。当您在浏览器上将右侧元素靠近左侧元素时，您可以看到这一点。

而是使用..“nav-header”

  <header class="masthead">
  <div class="container">
   <div class="nav-header">
        <h1>
           <a href="#" title="scroll down for your viewing pleasure">
              Bootstrap 3 Layout Template
           </a>
           <p class="lead">Big Top Header and Fixed Sidebar</p>
        </h1>
        <div class="pull-right hidden-sm">    
          <h1>
            <a href="#"><i class="glyphicon glyphicon-user"></i>
               <i class="glyphicon glyphicon-chevron-down"></i>
            </a>
          </h1>
    </div>
  </div>
</div>
</header>