SoFunction
Updated on 2025-04-07

Bootstrap listens to scroll to achieve header follow-up scrolling

This article shares with you the implementation method of bootstrap monitoring scrolling head and 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='menu_wrap'> 
 <div class='menu'> 
  <nav class="navbar navbar-default" role="navigation"> 
  <div class="container"> 
  <div class="navbar-header"> 
  &lt;a class="navbar-brand" href="#" style="font-weight:bold">Vegetation data entry</a>  &lt;/div&gt; 
  &lt;div class="collapse navbar-collapse" &gt; 
  &lt;!-- &lt;button type="button" class="close" data-dismiss="modal" data-target="#mychart2-zb"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt; --&gt;
   &lt;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">Save</span></button>   &lt;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">Cancel</span></button>  &lt;/div&gt; 
 &lt;/div&gt; 
 &lt;/nav&gt; 
 &lt;/div&gt; 
&lt;/div&gt;
&lt;/body&gt;

css control style

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

js listening

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

Import js

 <script type="text/javascript" src="../bower_components/jquery/dist/"></script>
 <script type="text/javascript" src="../bower_components/bootstrap/dist/js/"></script>

Only by sharing knowledge can we spread, promote new knowledge, and learn more. Every text/blog written here is basically checked for information from the Internet and recorded it. Some of them are also moved in the original flavor, and sometimes they add some of their own ideas, hoping to help everyone.

If you want to learn more, you can clickhereLet’s study and attach two exciting topics to you:Bootstrap learning tutorial Bootstrap practical tutorial

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.