JS Affix (affix.js)
Il plugin permette Fissare un elemento di diventare apposto (bloccato) di un'area della pagina. Questo viene spesso utilizzato con i menu di navigazione o pulsanti a icona sociali, per renderli "bastone" in una specifica area durante lo scorrimento su e giù per la pagina.
Il plugin alterna questo comportamento dentro e fuori (cambia il valore della posizione CSS da statico a fisso), a seconda della posizione di scorrimento.
Il plug-affisso alterna tra tre classi: .affix , .affix-top , e .affix-bottom . Ogni classe rappresenta uno stato particolare. È necessario aggiungere proprietà CSS per gestire le posizioni reali, ad eccezione della position:fixed sul .affix classe.
Per ulteriori informazioni, leggere la nostra Bootstrap Affix tutorial .
Suggerimento: Il plugin Affix è spesso usato insieme al Scrollspy plugin.
Via data-* Attributi
Aggiungi data-spy="affix" per l'elemento che si desidera spiare, e il data-offset-top|bottom=" number " di attributo per calcolare la posizione del rotolo.
Esempio
<ul class="nav nav-pills nav-stacked" data-spy="affix"
data-offset-top="205">
Prova tu stesso " Via JavaScript
Attivare manualmente con:
Fissare Opzioni
Le opzioni possono essere passati attraverso gli attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome opzione per data-, come nel data-offset = "".
| Nome | Digitare | Predefinito | Descrizione |
|---|---|---|---|
| offset | number | object | function | 10 | Specifica il numero di pixel per compensare dallo schermo quando si calcola la posizione di scorrimento. Quando si utilizza un singolo numero, la viene aggiunto a entrambe le direzioni superiore e inferiore offset. Se si desidera solo per controllare la parte superiore o inferiore, utilizzare un oggetto, come offset: {top:25} Per più offset, utilizzare offset: {top:25, bottom:50} Suggerimento: Utilizzare una funzione di fornire in modo dinamico un offset (può essere utile per i disegni reattivi) |
| target | selector | node | element | the window object | Specifica l'elemento di destinazione del affisso |
Fissare Eventi
La seguente tabella elenca gli eventi Affix tutti disponibili.
| Evento | Descrizione | Provalo |
|---|---|---|
| affix.bs.affix | Si verifica prima posizionamento fisso viene aggiunto all'elemento (ad esempio, quando il .affix-top class sta per essere sostituito con il .affix classe) | Provalo |
| affixed.bs.affix | Si verifica dopo il posizionamento fisso viene aggiunto all'elemento (ad esempio, dopo la .affix-top classe viene sostituito con il .affix classe) | Provalo |
| affix-top.bs.affix | Si verifica prima dell'elemento superiore ritorna alla sua posizione originale (non fisso) (ad esempio, il .affix classe sta per essere sostituito con .affix-top ) | Provalo |
| affixed-top.bs.affix | Si verifica dopo l'elemento superiore ritorna alla sua posizione originale (non fisso) (ad esempio, il .affix classe è stato sostituito con .affix-top ) | Provalo |
| affix-bottom.bs.affix | Si verifica prima dell'elemento inferiore ritorna alla sua posizione originale (non fisso) (ad esempio, il .affix classe sta per essere sostituito con .affix-bottom ) | Provalo |
| affixed-bottom.bs.affix | Si verifica dopo l'elemento inferiore ritorna alla sua posizione originale (non fisso) (ad esempio, il .affix classe è stato sostituito con .affix-bottom ) | Provalo |
Esempi
apposto barra di navigazione
Creare un menu di navigazione orizzontale apposto:
Esempio
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> Prova tu stesso " Utilizzando jQuery di apporre automaticamente una barra di navigazione
Utilizzare jQuery outerHeight() metodo per apporre la barra di navigazione dopo che l'utente ha superato scorrere un elemento specificato (<header>) :
Scrollspy & Affix
Utilizzando l'affisso plug insieme al Scrollspy plugin:
Menu orizzontale (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> Prova tu stesso " 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> Prova tu stesso " barra di navigazione animato su apporre
Utilizzare i CSS per manipolare le diverse .affix classi:
Esempio - Cambia il colore di sfondo e l'imbottitura della barra di navigazione sul rotolo
.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;
} Prova tu stesso " Esempio - Far scorrere la 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;
} Prova tu stesso "