Bootstrap Affix Plugin (Advanced)

Il plugin Affix

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 "stick" 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.

Esempio 1) Una barra di navigazione apposta:

Esempio 2) Una barra laterale apposta:

Con appone quando scorrere verso l'alto e in basso nella pagina, il menu è sempre visibile e bloccato nella sua posizione.

Come creare un menu di navigazione Apposto

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

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

esempio spiegato

Aggiungere data-spy="affix" per l'elemento che si desidera apposto.

Facoltativamente, aggiungere il data-offset-top|bottom attributo per calcolare la posizione del rotolo.

Come funziona

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.

• Il plugin aggiunge la .affix-top o .affix-bottom di classe per indicare l'elemento è nella sua più in alto o in basso più posizioni. Posizionamento con i CSS non è necessario a questo punto.


• Di scorrere oltre l'elemento apposto innesca l'apposizione reale - Questo è dove il plugin sostituisce il .affix-top o .affix-bottom classe con il .affix classe (set position:fixed ). A questo punto, è necessario aggiungere il CSS top o bottom di proprietà per posizionare l'elemento apposto in pagina.


• Se viene definito un offset di fondo, di scorrere oltre sostituisce il .affix classe con .affix-bottom . Dal momento che gli offset sono opzionali, impostando uno richiede di impostare l'appropriato CSS. In questo caso, aggiungere position:absolute quando necessario.

Nel primo esempio di cui sopra, il plugin Fissare aggiunge la .affix classe (posizione: fissa) al <nav> elemento quando abbiamo arrotolato 197 pixel dalla parte superiore. Se si apre l'esempio, si vedrà anche che abbiamo aggiunto il CSS top di proprietà con un valore pari a 0 al .affix di classe. Questo per assicurarsi che la barra di navigazione rimane nella parte superiore della pagina in ogni momento, quando abbiamo scorrimento 197 pixel dall'alto.

Scrollspy & Affix

Utilizzando l'affisso plug insieme al Scrollspy plugin:

Completare Bootstrap Affix di riferimento

Per un riferimento completo di tutti apporre i metodi e gli eventi, vai alla nostra Bootstrap JS Affix di riferimento .