Home > Article > php教程 > Bootstrap monitors scrolling to implement head-following scrolling

Bootstrap monitors scrolling to implement head-following scrolling

高洛峰Original: 2016-12-07 13:53:401413browse

The example of this article shares the implementation method of bootstrap monitoring scrolling head to follow the scrolling for your reference. The specific content is as follows

implementation case

<body data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
<div id=&#39;menu_wrap&#39;>
 <div class=&#39;menu&#39;>
  <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 control style

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

js monitoring

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

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

Only by sharing can knowledge be spread, new knowledge can be promoted, and more can be learned. Every text/blog written here is basically queried from the Internet I took a look at the information and recorded it. Some of it was moved over as it was, and sometimes I added some of my own ideas. I hope it can help everyone.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Create cool pop-up effects with JS+CSS3Next article：Create cool pop-up effects with JS+CSS3

See more

Bootstrap monitors scrolling to implement head-following scrolling

Related articles