Bootstrap JS Affix
JS-affix (affix.js)
Met de Affix-plug-in kan een element worden bevestigd (vergrendeld) aan een gebied op de pagina. Dit wordt vaak gebruikt met navigatiemenu's of sociale pictogramknoppen, om ze op een specifiek gebied te laten "plakken" terwijl ze op en neer over de pagina scrollen.
De plug-in schakelt dit gedrag in en uit (verandert de waarde van de CSS-positie van statisch in vast), afhankelijk van de schuifpositie.
De affix-plug-in schakelt tussen drie klassen: .affix, .affix-top, en
.affix-bottom. Elke klasse vertegenwoordigt een bepaalde staat. U moet CSS-eigenschappen toevoegen om de werkelijke posities te verwerken, met uitzondering van position:fixed
op de .affixklasse.
Lees onze Bootstrap Affix Tutorial voor meer informatie .
Tip: De Affix-plug-in wordt vaak samen met de Scrollspy- plug-in gebruikt.
Via data-* Attributen
Voeg toe data-spy="affix"aan het element dat u wilt bespioneren en het
attribuut om de positie van de scroll te berekenen.data-offset-top|bottom="number"
Voorbeeld
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Via JavaScript
Handmatig inschakelen met:
Voorbeeld
$('.nav').affix({offset: {top: 150} });
Bevestig opties
Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voor gegevensattributen voegt u de optienaam toe aan data-, zoals 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 |
Gebeurtenissen toevoegen
De volgende tabel bevat alle beschikbare affix-gebeurtenissen.
| 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) |
Meer voorbeelden
Aangebracht navigatiebalk
Maak een horizontaal vast navigatiemenu:
Voorbeeld
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
jQuery gebruiken om automatisch een navigatiebalk toe te voegen
Gebruik de methode outerHeight() van jQuery om de navigatiebalk aan te brengen nadat de gebruiker een gespecificeerd element heeft gescrold (<header>):
Voorbeeld
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Scrollspy & Affix
De Affix-plug-in gebruiken samen met de Scrollspy- plug-in:
Horizontaal menu (navigatiebalk)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Verticaal 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>
Geanimeerde navigatiebalk op affix
Gebruik CSS om de verschillende .afix-klassen te manipuleren:
Voorbeeld - Verander de achtergrondkleur en opvulling van de navigatiebalk bij het 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;
}
Voorbeeld - Schuif in de navigatiebalk
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}