首页 > 代码库 > bootstrap-监听滚动实现头部跟随滚动

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

2024-08-12 12:50:21   212人阅读

实现案例

<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>

 

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


联系
我们