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>

相关阅读:
数学前沿
 线性空间引论(第2版)
例解回归分析(原书第5版)
随机过程(原书第2版)
Windows系统服务器IIS7.5 Asp.net支持10万请求的设置方法
 c# HttpClient禁止缓存
 AngularJs 1.5 $location获取url参数
 Net中HttpClient 重试
 C# 内存信息
 EntityFramework Core 封装
原文地址：https://www.cnblogs.com/hwaggLee/p/5851575.html