Heim > Artikel > php教程 > Bootstrap überwacht das Scrollen, um ein Head-Following-Scrolling zu implementieren

Bootstrap überwacht das Scrollen, um ein Head-Following-Scrolling zu implementieren

高洛峰Original: 2016-12-07 13:53:401450Durchsuche

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

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

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

JS-Überwachung

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

Js importieren

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

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erstellen Sie coole Popup-Effekte mit JS+CSS3Nächster Artikel：Erstellen Sie coole Popup-Effekte mit JS+CSS3

In Verbindung stehende Artikel

Mehr sehen