bootstrap-监听滚动实现头部跟随滚动

实现案例

<body  data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
<div id='menu_wrap'>    
    <div class='menu'>    
         <nav class="navbar navbar-default" role="navigation">  
         <div class="container">  
            <div class="navbar-header">  
            <a class="navbar-brand" href="#"  style="font-weight:bold">植被数据录入</a>  
            </div>  
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">  
            <!-- <button type="button" class="close" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">&times;</span></button> -->
                    <button type="button" class="btn btn-primary" style="float: right;margin-right: 10px;margin-top: 5px;" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">保存</span></button>
                    <button type="button" class="btn btn-primary" style="float: right;margin-right: 10px;margin-top: 5px;" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">取消</span></button>
            </div>  
        </div>  
        </nav>  
    </div>    
</div>
</body>

 css控制样式

.menu{    
    width:100%;  
    z-index:99;  
}
.menuFixed{    
    position:fixed;    
    top:0;    
    left:0;  
}    
#menu_wrap{  
    height:50px;    
    width:100%;    
}

 js监听

    <script>  
        $(window).scroll(function () {  
            var menu_top = $('#menu_wrap').offset().top;  
            if ($(window).scrollTop() >= menu_top) {  
                $('.menu').addClass('menuFixed')  
            }  
            else {  
                $('.menu').removeClass('menuFixed')  
            }  
        });    
    </script>

 

导入js

    <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

 

posted @ 2016-09-08 00:04  243573295  阅读(744)  评论(1)  编辑  收藏  举报