当前位置：首页 > 资讯 > 技术文档

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

时间：2022-04-08 23:58 编辑：来源：阅读：
扫一扫，手机访问

摘要：bootstrap监听滚动实现头部跟随滚动

本文实例为大家分享了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">×</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>

知识只有共享才能传播，才能推崇出新的知识，才能学到更多，这里写的每一篇文字/博客，基本都是从网上查询了一下资料然后记录下来，也有些是原滋原味搬了过来，也有时加了一些自己的想法，希望可以帮助到大家。如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附两个精彩的专题：[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：JS实现的图片预览插件与用法示例【不上传图片】
下一篇：javascript文件中引用依赖的js文件的方法

资讯排行榜
更多>>