您的位置：首页 > Web前端 > BootStrap

bootstrap 3 navrbar实现置顶并滚动监听

2014-06-07 22:37 766 查看 
<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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航