Apposizione Bootstrap JS
Affisso JS (affix.js)
Il plug-in Affix consente a un elemento di essere apposto (bloccato) in un'area della pagina. Viene spesso utilizzato con i menu di navigazione o i pulsanti delle icone social, per farli "attaccare" in un'area specifica mentre si scorre su e giù la pagina.
Il plugin attiva e disattiva questo comportamento (cambia il valore della posizione CSS da statico a fisso), a seconda della posizione di scorrimento.
Il plug-in affix alterna tre classi: .affix, .affix-top, e
.affix-bottom. Ogni classe rappresenta uno stato particolare. È necessario aggiungere proprietà CSS per gestire le posizioni effettive, ad eccezione della position:fixed
classe .affix.
Per ulteriori informazioni, leggi il nostro tutorial per l'affissione di Bootstrap .
Suggerimento: il plug-in Affix viene spesso utilizzato insieme al plug-in Scrollspy .
Via dati-* Attributi
Aggiungi data-spy="affix"all'elemento che vuoi spiare e l'
attributo per calcolare la posizione della pergamena.data-offset-top|bottom="number"
Esempio
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Tramite JavaScript
Abilita manualmente con:
Esempio
$('.nav').affix({offset: {top: 150} });
Opzioni di apposizione
Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungi il nome dell'opzione a data-, come 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 |
Apporre eventi
La tabella seguente elenca tutti gli eventi di affissione disponibili.
| 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) |
Altri esempi
Barra di navigazione apposta
Crea un menu di navigazione apposto orizzontale:
Esempio
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Utilizzo di jQuery per apporre automaticamente una barra di navigazione
Usa il metodo outerHeight() di jQuery per apporre la barra di navigazione dopo che l'utente ha passato un elemento specificato (<header>):
Esempio
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Spia pergamena e apporre
Utilizzando il plug-in Affix insieme al plug-in Scrollspy:
Menu orizzontale (barra di navigazione)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Menu verticale (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>
Barra di navigazione animata sull'affisso
Usa i CSS per manipolare le diverse classi .affix:
Esempio: cambia il colore di sfondo e il riempimento della barra di navigazione durante lo scorrimento
.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;
}
Esempio: scorrere nella barra di navigazione
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}