Bootstrap Affix-inprop (gevorderd)

Die Affix-inprop

Die Affix-inprop laat 'n element toe om aan 'n area op die bladsy geheg (gesluit) te word. Dit word dikwels gebruik met navigasie-kieslyste of sosiale ikoonknoppies, om hulle by 'n spesifieke area te laat "plak" terwyl hulle op en af ​​op die bladsy blaai.

Die inprop skakel hierdie gedrag aan en af ​​(verander die waarde van van na ), afhangende van rolposisie .CSS positionstaticfixed

Voorbeeld 1) 'n Geplakte navigasiebalk:

Voorbeeld 2) 'n Aangehegte sybalk:

Met Affix, wanneer ons op en af ​​op die bladsy blaai, is die spyskaart altyd sigbaar en gesluit in sy posisie.

Hoe om 'n aangehegte navigasiekieslys te skep

Die volgende voorbeeld wys hoe om 'n horisontale aangehegte navigasiekieslys te skep:

Die volgende voorbeeld wys hoe om 'n vertikale aangehegte navigasiekieslys te skep:

Voorbeeld Verduidelik

Voeg data-spy="affix"by die element wat jy wil aanbring.

Voeg opsioneel die data-offset-top|bottomkenmerk by om die posisie van die boekrol te bereken.

Hoe dit werk

Die affix-inprop wissel tussen drie klasse: .affix, .affix-top, en .affix-bottom. Elke klas verteenwoordig 'n spesifieke toestand. Jy moet CSS-eienskappe byvoeg om die werklike posisies te hanteer, met die uitsondering van position:fixed op die .affixklas.

• Die inprop voeg die .affix-topof .affix-bottomklas by om aan te dui dat die element in sy boonste of onderste posisie is. Posisionering met CSS word nie op hierdie stadium vereis nie.


• Deur verby die aangehegte element te blaai, veroorsaak dit die werklike aanbring - Dit is waar die inprop die .affix-topof .affix-bottomklas vervang met die .affixklas (stelle position:fixed). Op hierdie stadium moet jy die CSS topof bottomeiendom byvoeg om die aangehegte element op die bladsy te posisioneer.


• As 'n onderste offset gedefinieer is, vervang dit die .affixklas met .affix-bottom. Aangesien afwykings opsioneel is, vereis die instelling van een dat u die toepaslike CSS instel. In hierdie geval, voeg by position:absolutewanneer nodig.

In die eerste voorbeeld hierbo voeg die Affix-inprop die .affixklas (posisie:fixed) by die <nav>-element wanneer ons 197 pixels van bo af gerol het. As jy die voorbeeld oopmaak, sal jy ook sien dat ons die CSS top-eienskap met 'n waarde van 0 by die .affixklas gevoeg het. Dit is om seker te maak dat die navigasiebalk te alle tye bo-aan die bladsy bly, wanneer ons 197 pixels van bo af gerol het.

Scrollspy & Plak

Gebruik die Affix-inprop saam met die Scrollspy- inprop:

Voltooi Bootstrap Affix-verwysing

Vir 'n volledige verwysing van alle aanhegmetodes en -geleenthede, gaan na ons Bootstrap JS Affix-verwysing .