suchen

Heim  >  Artikel  >  Web-Frontend  >  Bootstrap muss jeden Tag zusätzliche Navigations-(Affix-)Plug-in-Javascript-Kenntnisse erlernen

Bootstrap muss jeden Tag zusätzliche Navigations-(Affix-)Plug-in-Javascript-Kenntnisse erlernen

WBOY
WBOYOriginal
2016-05-16 15:04:001713Durchsuche

Mit dem Affix-Plugin kann ein dc6dce4a544fdca2df29d5ac0ea9906b an einer bestimmten Stelle auf der Seite fixiert werden. Sie können auch zwischen der Verwendung des Plugins ein- und ausschalten. Ein häufiges Beispiel sind soziale Symbole. Sie beginnen an einer bestimmten Position, aber wenn auf der Seite auf eine Markierung geklickt wird, wird die Position des dc6dce4a544fdca2df29d5ac0ea9906b fixiert und scrollt nicht mit dem Rest der Seite.
Wenn Sie die Funktionalität des Plugins einzeln referenzieren möchten, müssen Sie auf affix.js verweisen.

1. Verwendung

Affix-Plugin kann über Datenattribut oder über JavaScript verwendet werden.
1. Über das Datenattribut: Wenn Sie einem Element zusätzliches Navigationsverhalten (Affix) hinzufügen müssen, müssen Sie nur data-spy="affix" zu dem zu überwachenden Element hinzufügen. Verwenden Sie Offsets, um zu definieren, wann die Sperre und Verschiebung eines Elements umgeschaltet werden soll.
2. Über JavaScript: Sie können einem Element manuell über JavaScript
zusätzliche Navigation (Affix) hinzufügen

2. Positionierung durch CSS

Bei beiden oben genannten Möglichkeiten der Nutzung des Affix-Plugins müssen Sie den Inhalt per CSS positionieren. Das Attached Navigation (Affix)-Plug-in wechselt zwischen drei Klassen, von denen jede einen bestimmten Status darstellt: .affix, .affix-top und .affix-bottom. Bitte befolgen Sie die folgenden Schritte, um Ihr eigenes CSS für diese drei Zustände festzulegen (ohne sich auf dieses Plugin zu verlassen).
1. Zu Beginn fügt das Plugin .affix-top hinzu, um anzuzeigen, dass sich das Element an seiner obersten Position befindet. Derzeit ist keine CSS-Positionierung erforderlich.
2. Wenn Sie an einem Element mit hinzugefügter zusätzlicher Navigation (Affix) vorbeiscrollen, sollte die eigentliche zusätzliche Navigation (Affix) ausgelöst werden. Zu diesem Zeitpunkt ersetzt .affix .affix-top und setzt position: Fixed; (bereitgestellt durch den CSS-Code von Bootstrap).
3. Wenn der untere Versatz definiert ist und der Bildlauf diese Position erreicht, sollte .affix durch .affix-bottom ersetzt werden. Da der Offset optional ist, erfordert seine Einstellung, dass auch das entsprechende CSS festgelegt wird. Fügen Sie in diesem Fall bei Bedarf position: absolute;

3. Optionen

Einige Optionen werden über Datenattribute oder JavaScript übergeben. Die Optionen sind in der folgenden Tabelle aufgeführt:

4. Beispiele
Zusätzliche Navigation wird irgendwo auf dem Bildschirm eingefügt, um die Ankerfunktion zu implementieren.
1. Grundlegende Beispiele

<body data-spy="scroll" data-target="#myScrollspy">

 <div class="container">
 <div class="jumbotron" style="height:150px">
  <h1>Bootstrap Affix</h1>
 </div>
 <div class="row">
  <div class="col-xs-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix"data-offset-top="150">
   <li class="active">
   <a href="#section-1">第一部分 </a>
   </li>
   <li>
   <a href="#section-2">第二部分</a>
   </li>
   <li>
   <a href="#section-3">第三部分</a>
   </li>
   <li>
   <a href="#section-4">第四部分</a>
   </li>
   <li>
   <a href="#section-4">第五部分</a>
   </li>
  </ul>
  </div>
  <div class="col-xs-9">
  <h2 id="section-1">第一部分</h2>
  <p>
   ...
  </p>
  <h2 id="section-2">第二部分</h2>
  <p>
   ...
  </p>
  <h2 id="section-3">第三部分</h2>
  <p>
   ...
  </p>
  <h2 id="section-4">第四部分</h2>
  <p>
   ...
  </p>
  <h2 id="section-5">第四部分</h2>
  <p>
   ...
  </p>
  </div>

 </div>
 </div>

2. CSS-Teil der Navigation

ul.nav-pills {
 width: 200px;
}
ul.nav-pills.affix {
 top: 30px;
}
//JavaScript 代替 data-spy="affix" data-offset-top="125"

$('#myAffix').affix({
 offset : {
 top : 150
 }
})

Wir verwenden standardmäßig oben, aber natürlich kann es auch standardmäßig unten sein. Diese Positionierungsmethode wird direkt über CSS positioniert. 

//设置成 bottom

ul.nav-tabs.affix-bottom {
 bottom: 30px;
}
//设置成 bottom

$('#myAffix').affix({
 offset : {
 bottom : 150
 }
})

Affix enthält mehrere Ereignisse wie folgt: 

//其他雷同

$('#myAffix').on('affixed-top.bs.affix', function() {
 alert('触发！');
});

Weitere Informationen finden Sie unter: Bootstrap Learning Tutorial

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

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：Bootstrap muss jeden Tag das Tab-Plugin (Tab) erlernen_Javascript-KenntnisseNächster Artikel：Bootstrap muss jeden Tag das Tab-Plugin (Tab) erlernen_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen