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

问题描述

我想将一个横幅放到Bootstrap的固定顶部导航栏上。我的目标是使用导航栏作为操作导航并在其上方放置项目的标题。如果在滚动的情况下navbar一直在那里，这将是很酷的，但是横幅消失会更好。

我怎样才能做到这一点，任何例子？

解决方案

诀窍在于使用 affix ，然后你不一定需要将横幅放在< header> 中。

css：

  #topnavbar {
 margin：0; 
} 
＃topnavbar.affix {
 position：fixed; 
 top：0; 
宽度：100％; 
 
  

js：

<$ （
顶部：$（'＃banner'）。height（）
} $（'＃topnavbar'）。
}）;

html：

 < div class =containerid =banner> 
< div class =row> 
< h1>您的横幅< / h1> 
< / div> 
< / div> 
 
< nav class =navbar navbar-default navbar-static-toprole =navigationid =topnavbar> 
 ... 
< / nav> 
  

查看。

I want to put an banner onto the fixed top navbar of the Bootstrap. My aim is using the navbar as the navigation for operations and putting a banner of the project above it. It will be cool if navbar is alway there in case of scrolling, but it is better for banner to disappear.

How can I achieve that, any examples?

解决方案

The trick is in using affix, and then you don't necessarily need to put the banner in the <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>

Check out the demo in bootstrap 3.1.1.

这篇关于将内容/横幅放在“固定顶部导航栏”上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！