JS afix (affix.js)
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 (changes the value of CSS position from static to fixed) de (changes the value of CSS position from static to fixed) , în funcție de poziția de derulare.
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.
Pentru mai multe informații, citiți Bootstrap afix Tutorial .
Sfat: afixul Plugin - ul este adesea utilizat împreună cu Scrollspy plugin.
Via data-* Atribute
Adăugați data-spy="affix" la elementul pe care doriți să spioneze, iar data-offset-top|bottom=" number " de data-offset-top|bottom=" number " atributul pentru a calcula poziția de parcurgere.
Exemplu
<ul class="nav nav-pills nav-stacked" data-spy="affix"
data-offset-top="205">
Încearcă - l singur » Via JavaScript
Activați manual cu:
lipiţi Opțiuni
Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atribute de date, adăugați numele opțiune pentru a datelor, la fel ca în date de offset = „“.
| Nume | Tip | Mod implicit | Descriere |
|---|---|---|---|
| offset | number | object | function | 10 | Specifică numărul de pixeli pentru a compensa de la ecran la calcularea poziției de parcurgere. Atunci când se utilizează un singur număr, diferența se adaugă la ambele direcții de sus și de jos. Dacă doriți doar pentru a controla partea de sus sau de jos, utilizați un obiect, cum ar fi offset: {top:25} Pentru mai multe compensări, utilizați offset: {top:25, bottom:50} de offset: {top:25, bottom:50} Sfat: Utilizați o funcție pentru a furniza în mod dinamic un offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifică elementul țintă al afixul |
lipiţi Evenimente
Tabelul următor listează evenimente Lipiți toate disponibile.
| Eveniment | Descriere | Incearca-l |
|---|---|---|
| affix.bs.affix | Să se efectueze înainte de poziționare fixă se adaugă la elementul ( de exemplu, atunci când .affix-top clasa este pe cale să fie înlocuită cu .affix clasa) | Incearca-l |
| affixed.bs.affix | După poziționare fixă Se produce , se adaugă la elementul ( de exemplu, după .affix-top clasă este înlocuit cu .affix clasa) | Incearca-l |
| affix-top.bs.affix | Are loc înainte ca elementul de sus revine la original (non-fixed) poziție ( de ex .affix clasa este pe cale să fie înlocuită cu .affix-top ) | Incearca-l |
| affixed-top.bs.affix | Elementul apare după sus revine la original (non-fixed) poziție ( de ex .affix clasa a fost înlocuit cu .affix-top ) | Incearca-l |
| affix-bottom.bs.affix | Are loc înainte de elementul de fund revine la original (non-fixed) poziție ( de ex .affix clasa este pe cale să fie înlocuită cu .affix-bottom ) | Incearca-l |
| affixed-bottom.bs.affix | Apare după elementul de jos revine la original (non-fixed) poziție ( de ex .affix clasa a fost înlocuit cu .affix-bottom ) | Incearca-l |
Exemple
navbar aplicat
Creați un meniu de navigare aplicat pe orizontală:
Exemplu
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> Încearcă - l singur » Utilizarea jQuery pentru a aplica în mod automat un navbar
Utilizați jQuery outerHeight() metoda de a aplica navbar după ce utilizatorul a trecut scrolled un element specificat (<header>) :
Scrollspy & afix
Utilizarea afixul plugin împreună cu Scrollspy plugin:
Meniu orizontal (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> Încearcă - l singur » Meniu vertical (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> Încearcă - l singur » navbar animate pe afix
Utilizați CSS pentru a manipula diferite .affix clase:
Exemplu - Schimbarea culorii de fundal și padding de navbar pe pergamentul
.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;
} Încearcă - l singur » Exemplu - Slide în navbar
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
} Încearcă - l singur »