Das Beispiel in diesem Artikel teilt die Implementierungsmethode der Bootstrap-Überwachung des Bildlaufkopfes und der Verfolgung des Bildlaufs als Referenz. Der spezifische Inhalt ist wie folgt
Implementierungsfall
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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>
|
Nach dem Login kopieren
CSS-Steuerungsstil
1 2 3 4 5 6 7 8 9 10 11 12 13 | .menu{
width:100%;
z-index:99;
}
.menuFixed{
position:fixed;
top:0;
left:0;
}
#menu_wrap{
height:50px;
width:100%;
}
|
Nach dem Login kopieren
JS-Überwachung
1 2 3 4 5 6 7 8 9 10 11 | <script>
$(window).scroll( function () {
var menu_top = $('#menu_wrap').offset().top;
if ($(window).scrollTop() >= menu_top) {
$('.menu').addClass('menuFixed')
}
else {
$('.menu').removeClass('menuFixed')
}
});
</script>
|
Nach dem Login kopieren
Js importieren
1 2 | <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>
|
Nach dem Login kopieren
Nur durch Teilen kann Wissen verbreitet, neues Wissen gefördert und mehr gelernt werden . Alles, was hier geschrieben wurde, basiert im Wesentlichen auf der Suche und Aufzeichnung der Informationen im Internet, und manchmal füge ich einige meiner eigenen Ideen hinzu.