Implementation case
<BodyData-spy= "Scroll"Data-target= "#bs-example-navbar-collapse-1"><DivID= ' Menu_wrap '> <Divclass= ' Menu '> <navclass= "NavBar Navbar-default"role= "Navigation"> <Divclass= "Container"> <Divclass= "Navbar-header"> <aclass= "Navbar-brand"href="#"style= "Font-weight:bold">Vegetation Data Entry</a> </Div> <Divclass= "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> - <Buttontype= "button"class= "Btn btn-primary"style= "float:right;margin-right:10px;margin-top:5px;"Data-dismiss= "Modal"Data-target= "#mychart2-zb"><spanAria-hidden= "true">Save</span></Button> <Buttontype= "button"class= "Btn btn-primary"style= "float:right;margin-right:10px;margin-top:5px;"Data-dismiss= "Modal"Data-target= "#mychart2-zb"><spanAria-hidden= "true">Cancel</span></Button> </Div> </Div> </nav> </Div> </Div></Body>
CSS Control Styles
. Menu { width:100%; z-index:A; } . menufixed { position:fixed; top:0; Left:0; } #menu_wrap{ height:50px; Width:100%; }
JS Monitor
<Script>$ (window). Scroll (function () { varMenu_top= $('#menu_wrap'). Offset (). Top; if($ (window). scrolltop ()>=menu_top) { $('. Menu'). addclass ('menufixed') } Else { $('. Menu'). Removeclass ('menufixed') } }); </Script>
Import JS
<type= "Text/javascript" src= ": /bower_components/jquery/dist/jquery.min.js "></script> < Type = "text/javascript" src= ": /bower_components/bootstrap/dist/js/bootstrap.min.js "></script>
bootstrap-monitoring scrolling for head follow scrolling