将内容/横幅放在“固定顶部导航栏”上方 [英] Putting content/banner above the "Fixed Top Navbar"
问题描述
我想将一个横幅放到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>
查看 bootstrap 3.1.1 。
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.
这篇关于将内容/横幅放在“固定顶部导航栏”上方的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!