Bootstrap Affix Plugin (pokročilý)

Plugin Afix

Plugin Affix umožňuje, aby se prvek připojil (zamkl) k oblasti na stránce. To se často používá s navigačními nabídkami nebo tlačítky sociálních ikon, aby se „přilepily“ na určitou oblast při posouvání nahoru a dolů po stránce.

Plugin toto chování zapíná a vypíná (mění hodnotu CSS positionz staticna fixed), v závislosti na pozici posouvání.

Příklad 1) Připojený navigační panel:

Příklad 2) Připojený postranní panel:

S Affixem, když posouváme stránku nahoru a dolů, je nabídka vždy viditelná a uzamčená na své pozici.

Jak vytvořit připojenou navigační nabídku

Následující příklad ukazuje, jak vytvořit horizontální připojenou navigační nabídku:

Následující příklad ukazuje, jak vytvořit vertikální připojenou navigační nabídku:

Příklad vysvětlen

Přidejte data-spy="affix"k prvku, který chcete připevnit.

Volitelně přidejte data-offset-top|bottomatribut pro výpočet pozice svitku.

Jak to funguje

Plugin pro afix přepíná mezi třemi třídami: .affix, .affix-topa .affix-bottom. Každá třída představuje určitý stav. Musíte přidat vlastnosti CSS, abyste zvládli skutečné pozice, s výjimkou position:fixed na .affixtřídě.

• Plugin přidá třídu .affix-topnebo .affix-bottom, aby indikoval, že prvek je na své nejvyšší nebo nejnižší pozici. Polohování pomocí CSS není v tomto okamžiku vyžadováno.


• Posouváním za afixovaný prvek spouští skutečné připojení – zde plugin nahradí třídu .affix-topnebo třídou (sets ). V tomto okamžiku musíte přidat CSS nebo vlastnost, abyste umístili připojený prvek na stránku..affix-bottom.affixposition:fixedtopbottom


• Je-li definováno odsazení dna, posunutím za něj se .affixtřída nahradí znakem .affix-bottom. Vzhledem k tomu, že offsety jsou volitelné, nastavení jednoho vyžaduje, abyste nastavili příslušné CSS. V tomto případě v případě potřeby přidejte position:absolute.

V prvním příkladu výše plugin Affix přidá .affixtřídu (position:fixed) do prvku <nav>, když se posuneme o 197 pixelů shora. Pokud příklad otevřete, uvidíte také, že jsme topdo třídy přidali vlastnost CSS s hodnotou 0 .affix. Je to proto, abychom se ujistili, že navigační lišta zůstane po celou dobu v horní části stránky, když se posuneme o 197 pixelů shora.

Scrollspy & Affix

Použití pluginu Affix spolu s pluginem Scrollspy :

Vyplňte referenční příponu Bootstrap

Úplnou referenci o všech metodách a událostech připojování naleznete v naší Referenční příručce pro připojení Bootstrap JS .