JS Affix (affix.js)
Das Affix-Plugin ermöglicht es ein Element fixiert (gesperrt) werden zu einem Bereich auf der Seite. Dies ist oft mit Navigationsmenüs oder sozialen Symbol-Tasten verwendet, sie "kleben" zu einem bestimmten Bereich zu machen, während Scrollen nach oben und unten auf der Seite.
Das Plugin schaltet das Verhalten ein- und ausschalten (ändert sich der Wert von CSS Position von den statischen zu fest), auf Scroll-Position abhängig.
Das Affix - Plugin schaltet zwischen drei Klassen: .affix , .affix-top und .affix-bottom . Jede Klasse stellt einen bestimmten Zustand. Sie müssen CSS - Eigenschaften fügen Sie die aktuellen Positionen zu handhaben , mit Ausnahme der position:fixed auf der .affix Klasse.
Für weitere Informationen, unsere lesen Bootstrap Affix Tutorial .
Tipp: Das Affix - Plugin oft zusammen mit dem verwendet wird Scrollspy Plugin.
Via data-* Attribute
In data-spy="affix" auf das Element , das Sie ausspionieren wollen, und die data-offset-top|bottom=" number " Attribut die Position der Schriftrolle zu berechnen.
Beispiel
<ul class="nav nav-pills nav-stacked" data-spy="affix"
data-offset-top="205">
Versuch es selber " Via JavaScript
Aktivieren Sie manuell mit:
Affix-Optionen
Die Optionen können über Datenattribute oder JavaScript übergeben werden. Für die Datenattribute, die Option Namen Daten- anhängen, wie in Daten-Offset = "".
| Name | Art | Standard | Beschreibung |
|---|---|---|---|
| offset | number | object | function | 10 | Gibt die Anzahl der Pixel vom Bildschirm zu kompensieren, wenn die Position des Scroll-Berechnung. Wenn eine einzelne Zahl unter Verwendung der Offset für beide oberen und unteren Richtungen hinzugefügt wird. Wenn Sie nur die obere oder untere steuern möchten, verwenden Sie ein Objekt, wie offset: {top:25} Für mehrere Offsets verwenden offset: {top:25, bottom:50} Tipp: Verwenden Sie eine Funktion , um dynamisch ein Offset liefern (kann für ansprechende Designs nützlich sein) |
| target | selector | node | element | the window object | Gibt das Zielelement des Affix |
Affix Veranstaltungen
Die folgende Tabelle listet alle verfügbaren Affix Veranstaltungen.
| Event | Beschreibung | Versuch es |
|---|---|---|
| affix.bs.affix | Tritt ein, bevor feste Positionierung zu dem Element hinzugefügt wird (zB wenn die .affix-top - Klasse ist etwa mit der ersetzt werden .affix Klasse) | Versuch es |
| affixed.bs.affix | Tritt ein, nachdem feste Positionierung zu dem Element hinzugefügt wird (zB nach der .affix-top - Klasse wird mit dem ersetzten .affix Klasse) | Versuch es |
| affix-top.bs.affix | Tritt ein, bevor das obere Element in seine ursprüngliche (nicht fest) Position zurückkehrt (zB die .affix ist Klasse etwa mit ersetzt werden .affix-top ) | Versuch es |
| affixed-top.bs.affix | Tritt ein, nachdem das obere Element in seine ursprüngliche (nicht fest) Position zurückkehrt (zB die .affix - Klasse wurde mit ersetzt .affix-top ) | Versuch es |
| affix-bottom.bs.affix | Tritt auf, bevor das Bodenelement in seine ursprüngliche (nicht fest) Position zurückkehrt ( zum Beispiel die .affix Klasse über mit ersetzt werden .affix-bottom ) | Versuch es |
| affixed-bottom.bs.affix | Tritt auf, nachdem das Bodenelement in seine ursprüngliche (nicht fest) Position zurückkehrt ( zum Beispiel die .affix Klasse hat ersetzt .affix-bottom ) | Versuch es |
Beispiele
Angebracht navbar
Erstellen Sie eine horizontale befestigt Navigationsmenü:
Beispiel
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> Versuch es selber " jQuery anbringen automatisch eine navbar
Verwenden Sie jQuery outerHeight() Methode , um die navbar zu befestigen , nachdem der Benutzer ein angegebenes Element übergeben gescrollt hat (<header>) :
Scrollspy & Affix
Mit dem Affix - Plugin zusammen mit dem Scrollspy Plugin:
Horizontal Menu (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> Versuch es selber " Vertical Menu (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills
nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body> Versuch es selber " Animierte navbar auf Affix
Verwenden Sie CSS , die verschiedenen zu manipulieren .affix Klassen:
Beispiel - Hintergrundfarbe ändern und Polsterung von navbar auf blättern
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff
!important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
} Versuch es selber " Beispiel - Schieben Sie in der Navigationsleiste
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
} Versuch es selber "