jquery - 将内容/横幅放在 "Fixed Top Navbar"上方

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 .