Bootstrap JS-Affix
JS-Affix (affix.js)
Mit dem Affix-Plug-in kann ein Element an einem Bereich auf der Seite angebracht (gesperrt) werden. Dies wird häufig bei Navigationsmenüs oder Symbolschaltflächen für soziale Netzwerke verwendet, damit sie beim Hoch- und Herunterscrollen der Seite an einem bestimmten Bereich "kleben".
Das Plugin schaltet dieses Verhalten ein und aus (ändert den Wert der CSS-Position von statisch auf fest), je nach Bildlaufposition.
Das Affix-Plugin schaltet zwischen drei Klassen um: .affix, .affix-top, und
.affix-bottom. Jede Klasse repräsentiert einen bestimmten Zustand. Sie müssen CSS-Eigenschaften hinzufügen, um die tatsächlichen Positionen zu handhaben, mit Ausnahme von position:fixed
in der .affixKlasse.
Weitere Informationen finden Sie in unserem Bootstrap-Affix-Tutorial .
Tipp: Das Affix-Plugin wird oft zusammen mit dem Scrollspy- Plugin verwendet.
Über data-* Attribute
Fügen data-spy="affix"Sie dem Element, das Sie ausspionieren möchten, das
Attribut hinzu, um die Position der Schriftrolle zu berechnen.data-offset-top|bottom="number"
Beispiel
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Über JavaScript
Manuell aktivieren mit:
Beispiel
$('.nav').affix({offset: {top: 150} });
Optionen anbringen
Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data- an, wie in data-offset="".
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like offset: {top:25}For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
Ereignisse anbringen
Die folgende Tabelle listet alle verfügbaren Affix-Ereignisse auf.
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) |
|
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) |
|
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top) |
|
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top) |
|
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom) |
|
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom) |
Mehr Beispiele
Angebrachte Navigationsleiste
Erstellen Sie ein horizontal angebrachtes Navigationsmenü:
Beispiel
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Verwenden von jQuery zum automatischen Anbringen einer Navigationsleiste
Verwenden Sie die Methode outerHeight() von jQuery, um die Navigationsleiste anzubringen, nachdem der Benutzer an einem bestimmten Element (<header>) vorbeigescrollt hat:
Beispiel
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Scrollspy & Affix
Verwendung des Affix-Plugins zusammen mit dem Scrollspy- Plugin:
Horizontales Menü (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>
Vertikales Menü (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>
Animierte Navigationsleiste auf Anbringung
Verwenden Sie CSS, um die verschiedenen .affix-Klassen zu manipulieren:
Beispiel – Ändern Sie die Hintergrundfarbe und die Polsterung der Navigationsleiste beim Scrollen
.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;
}
Beispiel – Slide 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;
}