Bootstrap Affix Plugin (Advanced)

Nakleić Plugin

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

Przykład 1) przytwierdzonej navbar:

Przykład 2) przytwierdzonej pasek boczny:

Z umieszcza kiedy przewijać w górę iw dół strony, menu jest zawsze widoczny i zamknął się w swoim położeniu.

Jak utworzyć menu nawigacji przymocowanej

Poniższy przykład pokazuje, jak utworzyć poziome menu nawigacyjne umieszczone:

Poniższy przykład pokazuje, jak utworzyć pionowe umieszczone menu nawigacji:

Przykład Poradnik

Dodaj data-spy="affix" do elementu, który chcesz umieszczone.

Ewentualnie dodać data-offset-top|bottom atrybut obliczyć położenie przewijania.

Jak to działa

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.

• Wtyczka dodaje .affix-top lub .affix-bottom klasę, aby wskazać element jest w swojej najwyższej większości lub dolnej skrajnej pozycji. Pozycjonowanie w CSS nie jest wymagana w tym punkcie.


• Przewijanie obok elementu przytwierdzonej wyzwala rzeczywiste umieszczania - To gdzie plugin zastępuje .affix-top lub .affix-bottom klasę z .affix klasy (zestawy position:fixed ). W tym momencie należy dodać CSS top lub bottom właściwość, aby ustawić umieszczane element strony.


• Jeżeli dolna przesunięcia jest zdefiniowana, przewijanie obok niego zastępuje .affix klasy z .affix-bottom . Od offsety są opcjonalne, ustawienie jednego wymaga, aby ustawić odpowiedni CSS. W tym przypadku, należy dodać position:absolute , gdy jest to konieczne.

W pierwszym przykładzie powyżej, wtyczka Nakleić dodaje .affix klasę (position: fixed) do <nav> elementu, gdy mamy przewijane 197 pikseli od góry. Po otwarciu przykład, można również zauważyć, że dodaliśmy CSS top mienia o wartości od 0 do .affix klasie. To jest upewnienie się, że navbar pozostaje w górnej części strony przez cały czas, gdy mamy przewijane 197 pikseli od góry.

Scrollspy & Nakleić

Używanie wtyczki umieszcza razem z Scrollspy wtyczki:

Wypełnij Bootstrap umieszcza Reference

Aby uzyskać pełną odniesienia wszystkim umieszcza metody i zdarzenia, przejdź do naszej Bootstrap JS umieszcza Reference .