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

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

2016-04-07 10:49 721 查看
<style>    

  

.menu    

{    

  

    width:100%;  

  

    z-index:1;  

}    

.menuFixed    

{    

    position:fixed;    

    top:0;    

    left:0;  

}    

#menu_wrap    

{    

    height:50px;    

    width:100%;    

  

}    

  

</style>    

以上是用到的CSS，接下来是navbar部分代码

[html] view
plain copy

 





<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中加入以下代码实现滚动监听。

[html] view
plain copy

 





<body  data-spy="scroll" data-target="#bs-example-navbar-collapse-1">   

js代码实现屏幕滚动时，navbar置顶。

[javascript] view
plain copy

 





<script>  

        $(window).scroll(function () {  

            var menu_top = $('#menu_wrap').offset().top;  

            if ($(window).scrollTop() >= menu_top) {  

                $('.menu').addClass('menuFixed')  

            }  

            else {  

                $('.menu').removeClass('menuFixed')  

            }  

        });    

    </script>    
                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航