Plugin Bootstrap Affix (avanzato)

Il plug-in per affissi

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 plug -in attiva e disattiva questo comportamento (modifica il valore di CSS positionda statica fixed), a seconda della posizione di scorrimento.

Esempio 1) Una barra di navigazione apposta:

Esempio 2) Una barra laterale apposta:

Con Affix, quando scorriamo su e giù per la pagina, il menu è sempre visibile e bloccato nella sua posizione.

Come creare un menu di navigazione affisso

L'esempio seguente mostra come creare un menu di navigazione apposto orizzontale:

L'esempio seguente mostra come creare un menu di navigazione apposto in verticale:

Esempio spiegato

Aggiungi data-spy="affix"all'elemento che vuoi apporre.

Facoltativamente, aggiungi l' data-offset-top|bottomattributo per calcolare la posizione della pergamena.

Come funziona

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.

• Il plugin aggiunge la classe .affix-topo .affix-bottomper indicare che l'elemento si trova nella sua posizione più in alto o più in basso. Il posizionamento con CSS non è richiesto a questo punto.


• Scorrendo oltre l'elemento apposto si attiva l'apposizione effettiva: è qui che il plug-in sostituisce la classe .affix-topo .affix-bottomcon la .affixclasse (sets position:fixed). A questo punto, devi aggiungere il CSS topo la bottomproprietà per posizionare l'elemento apposto nella pagina.


• Se viene definito un offset inferiore, lo scorrimento oltre sostituisce la .affixclasse con .affix-bottom. Poiché gli offset sono opzionali, impostarne uno richiede di impostare il CSS appropriato. In questo caso, aggiungere position:absolutequando necessario.

Nel primo esempio sopra, il plugin Affix aggiunge la .affixclasse (position:fixed) all'elemento <nav> quando abbiamo fatto scorrere 197 pixel dall'alto. Se apri l'esempio, vedrai anche che abbiamo aggiunto la topproprietà CSS con un valore di 0 alla .affixclasse. Questo per assicurarsi che la barra di navigazione rimanga sempre nella parte superiore della pagina, quando abbiamo fatto scorrere 197 pixel dall'alto.

Spia pergamena e apporre

Utilizzando il plug-in Affix insieme al plug-in Scrollspy:

Riferimento completo per l'affisso Bootstrap

Per un riferimento completo di tutti i metodi e gli eventi di affissione, vai al nostro Riferimento affissione Bootstrap JS .