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>

查看demo in 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>

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

2 个答案: