Plug-in-ul comută acest comportament și se oprește (modifică valoarea poziției CSS de la statică la fixă), în funcție de poziția derulantă.
Exemplul 1) atașat Navbar:
Exemplul 2) panou lateral atașat:
Cu ajutorul aplicației, atunci când derulăm pagina în sus și în jos, meniul este întotdeauna vizibil și blocat în poziția sa.
Cum se creează un meniu de navigare atașat
Următorul exemplu arată modul de creare a unui meniu de navigare orizontal atașat:
Următorul exemplu arată cum se creează un meniu vertical de navigare atașat:
Exemplu Explicație
Adăugați spy-data = "affix" la elementul pe care doriți să-l atașați.
Opțional, adăugați un atribut de date-offset-top | de jos pentru a calcula poziția de defilare.
Cum funcționează
Pluginul affix vă permite să comutați între cele trei clase. aplice. aplice-top. și .affix-bottom. Fiecare clasă reprezintă o anumită stare. Trebuie să adăugați proprietăți CSS pentru a gestiona pozițiile reale, cu excepția poziției: fixată pe clasa .affix.
Pluginul adaugă o clasă .affix-top sau .affix-bottom. pentru a indica faptul că elementul se află în poziția sa cea mai înaltă sau cea mai joasă. Poziționarea cu CSS nu este necesară în acest moment.
Derularea după elementul atașat provoacă atașamentul real - Aici pluginul înlocuiește clasa .affix-top sau .affix-bottom cu clasa .affix (stabilește poziția: fixă). În acest moment, trebuie să adăugați o proprietate CSS de sus sau de jos pentru a poziționa elementul atașat pe pagină.
În cazul în care este determinată deplasarea de jos, deplasarea înapoi înlocuiește clasa .affix cu .affix-bottom. Deoarece offseturile nu sunt obligatorii, instalarea uneia necesită instalarea CSS-ului corespunzător. În acest caz, adăugați poziția: absolută, dacă este necesar.
În primul exemplu de mai sus, pluginul Affix adaugă o clasă .affix (poziție: fixă) la
Scrollspy aplica
Utilizând pluginul Affix împreună cu pluginul Scrollspy:
Meniu orizontal (Navbar)
Meniul vertical (Sidenav)
Referință de referință pentru Bootstrap
Pentru a atribui complet toate metodele și evenimentele, accesați referința de referință JS de referință pentru Bootstrap.