JS Nakleić (affix.js)
Wtyczka Nakleić pozwala elementem stać przymocowanej (zablokowana) do obszaru na stronie. Jest to często wykorzystywane w nawigacji menu lub ikony przycisków społecznych, aby uczynić je "kij" na określonym obszarze podczas przewijania w górę iw dół strony.
Wtyczka przełącza takiego zachowania się i wyłącza (zmienia wartość pozycji CSS od statycznych na stałe), w zależności od położenia przewijania.
Przyrostka plugin przełączanie pomiędzy trzema klasami: .affix , .affix-top , a .affix-bottom . Każda klasa reprezentuje określony stan. Należy dodać właściwości CSS do obsługi rzeczywistych stanowiska, z wyjątkiem position:fixed na .affix klasie.
Aby uzyskać więcej informacji, przeczytaj nasz Bootstrap umieszcza Tutorial .
Wskazówka: Wtyczka Nakleić jest często używany wraz z Scrollspy wtyczki.
Via data-* Atrybuty
Dodaj data-spy="affix" do elementu, który chcesz szpiegować, a data-offset-top|bottom=" number " atrybut obliczyć położenie przewijania.
Przykład
<ul class="nav nav-pills nav-stacked" data-spy="affix"
data-offset-top="205">
Spróbuj sam " za pośrednictwem JavaScript
Włącz ręcznie za pomocą:
Dołączyć Opcje
Opcje mogą być przekazywane za pomocą atrybutów danych lub JavaScript. Dla atrybutów danych, nazwy opcji dołączania do teleinformatyczny, jak w danych offset = "".
| Nazwa | Rodzaj | Zaniedbanie | Opis |
|---|---|---|---|
| offset | number | object | function | 10 | Określa liczbę pikseli w celu odsunięcie od ekranu przy obliczaniu pozycji przewijania. Gdy za pomocą jednego numeru, przesunięcie dodaje się zarówno w górnej i dolnej strony. Jeśli chcesz tylko kontrolować górę lub w dół, użyj obiektu, jak offset: {top:25} Dla wielu przesunięć, użyj offset: {top:25, bottom:50} Wskazówka: Użyj funkcji dynamicznie dostarczyć offset (może być przydatna dla reagujących wzorów) |
| target | selector | node | element | the window object | Określa element docelowy przydomkiem |
Dołączyć pakietowe
Poniższa tabela zawiera listę wszystkich dostępnych wydarzeń umieszczają.
| Zdarzenie | Opis | Spróbuj |
|---|---|---|
| affix.bs.affix | Występuje przed stałym pozycjonowania jest dodany do elementu (na przykład, gdy .affix-top class ma zostać zastąpiony .affix klasie) | Spróbuj |
| affixed.bs.affix | Następuje po określonym pozycjonowania jest dodany do elementu (na przykład po .affix-top klasa jest zastąpiony .affix klasie) | Spróbuj |
| affix-top.bs.affix | Występuje przed górny element powraca do swojej pierwotnej (non-fixed) pozycji (np .affix klasa ma być zastąpiony .affix-top ) | Spróbuj |
| affixed-top.bs.affix | Następuje po górny element powraca do swojego pierwotnego (nie-stałe) stanowiska (np .affix klasa zastąpiono .affix-top ) | Spróbuj |
| affix-bottom.bs.affix | Występuje przed dolny element powraca do swojego pierwotnego (nieustalona) stanowiska (np .affix klasa ma być zastąpiona .affix-bottom ) | Spróbuj |
| affixed-bottom.bs.affix | Następuje po dolny element powraca do swojego pierwotnego (nieustalona) stanowiska (np .affix klasa została zastąpiona .affix-bottom ) | Spróbuj |
Przykłady
przymocowanych navbar
Tworzenie poziomej umieszczone menu nawigacji:
JQuery automatycznie umieszczają navbar
Użyj jQuery outerHeight() metoda, aby umieścić pasek nawigacyjny, gdy użytkownik przewinął podjęło określonego elementu (<header>) :
Scrollspy & Nakleić
Używanie wtyczki umieszcza razem z Scrollspy wtyczki:
Menu poziome (pasek nawigacyjny)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> Spróbuj sam " Pionowe menu (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> Spróbuj sam " Animowane navbar na przydomkiem
Za pomocą CSS do manipulowania różnymi .affix klasy:
Przykład - Zmiana koloru tła i wyściółka z paska nawigacyjnego na zwoju
.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;
} Spróbuj sam " Przykład - Przesuń na pasku nawigacyjnym
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
} Spróbuj sam "