Bootstrap Affix Plugin (Advanced)

Afixul Plugin

Afixul Plugin - ul permite un element să devină aplicată (locked) într - o zonă de pe pagină. Acest lucru este adesea folosit cu meniuri de navigare sau butoane pictograma sociale, pentru a le face "stick" la o anumită zonă , în timp ce defilare în sus și în jos a paginii.

Plugin - ul comutã acest comportament on și off (modifică valoarea poziției CSS de la static la fix), în funcție de poziția de derulare.

Exemplul 1) O navbar atașată:

Exemplul 2) O bară laterală atașată:

Cu afix, când derulați în sus și în jos a paginii, meniul este întotdeauna vizibil și blocat în poziția sa.

Cum Pentru a crea un meniu de navigare aplicat

Următorul exemplu arată cum să creați un meniu de navigare aplicat orizontal:

Următorul exemplu arată cum să creați un meniu de navigare aplicat pe verticală:

exemplu explicat

Adăugați data-spy="affix" la elementul pe care doriți atașată.

Opțional, adăugați data-offset-top|bottom de data-offset-top|bottom atribut pentru a calcula poziția de parcurgere.

Cum functioneaza

Afixul plugin comuta intre trei clase: .affix , .affix-top , și .affix-bottom . Fiecare clasă reprezintă o anumită stare. Trebuie să adăugați proprietăți CSS să se ocupe pozițiile reale, cu excepția position:fixed pe .affix clasa.

• Plugin - ul adaugă .affix-top sau .affix-bottom de .affix-bottom clasa pentru a indica elementul se află în ei cel mai de sus sau de jos în cele mai multe poziții. Poziționarea cu CSS nu este necesară în acest moment.


• Derularea elementului declanșează aplicarea aplicată efectiv - Aceasta este în cazul în care plugin - ul înlocuiește .affix-top sau .affix-bottom clasa cu .affix clasa (sets position:fixed ) . În acest moment, trebuie să adăugați CSS top de bottom top sau de bottom proprietatea de a poziționa elementul în pagina aplicată.


• În cazul în care un fund de offset este definit, Derularea îl înlocuiește .affix clasa cu .affix-bottom . Întrucât compensațiile sunt opționale, stabilind un vă cere să setați corespunzător CSS. În acest caz, se adaugă position:absolute atunci când este necesar.

În primul exemplu de mai sus, plugin afix adaugă .affix clasa (position:fixed) la <nav> Elementul când am scrolled 197 pixeli din partea de sus. Dacă deschideți exemplu, veți vedea , de asemenea , că am adăugat CSS top proprietatea cu o valoare de la 0 la .affix clasei. Acest lucru este să vă asigurați că navbar stă în partea de sus a paginii în orice moment, atunci când ne-am scrolled 197 pixeli din partea de sus.

Scrollspy & afix

Utilizarea afixul plugin împreună cu Scrollspy plugin:

Finalizarea Bootstrap afix de referință

Pentru o referință completă a tuturor aplică metode și evenimente, du - te la nostru Bootstrap JS afix de referință .