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 @   243573295  阅读(749)  评论(1)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae