<style>
.menu
{
width:100%;
z-index:1;
}
.menuFixed
{
position:fixed;
top:0;
left:0;
}
#menu_wrap
{
height:50px;
width:100%;
}
</style>
以上是用到的CSS,接下來是navbar部分代碼
<div class="container">
<div id='menu_wrap'>
<div class='menu'>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#" style="font-weight:bold">溫州金融IC卡</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hidden-xs"><a href="#unit" >活動主辦單位</a></li>
<li class="item active">
<a href="#iccard">“芯”介紹</a>
</li>
<li><a href="#hudong" >“芯”互動</a></li>
<li>
<a href="#shop">“芯”商家</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<div style="padding-bottom:10px; padding-top:10px" id="unit">
...
<div>
<div style="padding-bottom:10px; padding-top:10px" id="iccard">
...
<div>
在body中加入以下代碼實現滾動監聽。
<body data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
js代碼實現屏幕滾動時,navbar置頂。
<script>
$(window).scroll(function () {
var menu_top = $('#menu_wrap').offset().top;
if ($(window).scrollTop() >= menu_top) {
$('.menu').addClass('menuFixed')
}
else {
$('.menu').removeClass('menuFixed')
}
});
</script>