bootstrap 3 navrbar實現置頂並滾動監聽
阿新 • • 發佈：2019-01-29
<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>