Wtyczka Bootstrap Affix (zaawansowane)

Wtyczka afiksu

Wtyczka Affix umożliwia przymocowanie (zablokowanie) elementu do obszaru na stronie. Jest to często używane z menu nawigacyjnymi lub przyciskami ikon społecznościowych, aby „przykleić” je do określonego obszaru podczas przewijania strony w górę iw dół.

Wtyczka włącza i wyłącza to zachowanie (zmienia wartość CSS positionz staticna fixed), w zależności od pozycji przewijania.

Przykład 1) Umieszczony pasek nawigacyjny:

Przykład 2) Dołączony pasek boczny:

Dzięki Affix, kiedy przewijamy stronę w górę iw dół, menu jest zawsze widoczne i zablokowane w swojej pozycji.

Jak utworzyć przymocowane menu nawigacyjne

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

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

Przykład wyjaśniony

Dodaj data-spy="affix"do elementu, który chcesz umieścić.

Opcjonalnie dodaj data-offset-top|bottomatrybut, aby obliczyć położenie zwoju.

Jak to działa

Wtyczka afiksu przełącza między trzema klasami: .affix, .affix-topi .affix-bottom. Każda klasa reprezentuje określony stan. Musisz dodać właściwości CSS, aby obsłużyć rzeczywiste pozycje, z wyjątkiem position:fixed klasy .affix.

• Wtyczka dodaje klasę .affix-toplub .affix-bottom, aby wskazać, że element znajduje się na najwyższej lub najniższej pozycji. Pozycjonowanie za pomocą CSS nie jest w tym momencie wymagane.


• Przewijanie poza dołączony element wyzwala faktyczne umieszczenie — w tym miejscu wtyczka zastępuje klasę .affix-toplub klasą (sets ). W tym momencie musisz dodać CSS lub właściwość, aby umieścić dołączony element na stronie..affix-bottom.affixposition:fixedtopbottom


• Jeśli zdefiniowano dolne przesunięcie, przewijanie za nim zastępuje .affixklasę .affix-bottom. Ponieważ przesunięcia są opcjonalne, ustawienie jednego wymaga ustawienia odpowiedniego CSS. W takim przypadku dodaj position:absolutew razie potrzeby.

W pierwszym przykładzie powyżej wtyczka Affix dodaje .affixklasę (position:fixed) do elementu <nav> po przewinięciu 197 pikseli od góry. Jeśli otworzysz przykład, zobaczysz również, że dodaliśmy topwłaściwość CSS o wartości 0 do .affixklasy. Ma to na celu upewnienie się, że pasek nawigacyjny pozostaje na górze strony przez cały czas, gdy przewiniemy 197 pikseli od góry.

Scrollspy i afiks

Korzystanie z wtyczki Affix razem z wtyczką Scrollspy :

Pełne odniesienie do afiksu Bootstrapa

Aby uzyskać pełne informacje o wszystkich metodach i zdarzeniach afiksów, przejdź do naszego podręcznika Bootstrap JS Affix Reference .