jquery - 将内容/横幅放在“固定顶部导航栏”上方

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

而是使用..“导航标题”

  <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>