Bootstrap Affix-plug-in (geavanceerd)

De Affix-plug-in

Met de Affix-plug-in kan een element worden bevestigd (vergrendeld) aan een gebied op de pagina. Dit wordt vaak gebruikt met navigatiemenu's of sociale pictogramknoppen, om ze op een specifiek gebied te laten "plakken" terwijl ze op en neer over de pagina scrollen.

De plug- in schakelt dit gedrag in en uit (verandert de waarde van CSS positionvan staticin fixed), afhankelijk van de schuifpositie.

Voorbeeld 1) Een aangebrachte navigatiebalk:

Voorbeeld 2) Een aangebrachte zijbalk:

Met Affix, wanneer we op en neer scrollen op de pagina, is het menu altijd zichtbaar en vergrendeld in zijn positie.

Een vast navigatiemenu maken

Het volgende voorbeeld laat zien hoe u een horizontaal vastgemaakt navigatiemenu maakt:

Het volgende voorbeeld laat zien hoe u een verticaal vastgemaakt navigatiemenu maakt:

Voorbeeld uitgelegd

Voeg toe data-spy="affix"aan het element dat u wilt aanbrengen.

Voeg optioneel het data-offset-top|bottomattribuut toe om de positie van de scroll te berekenen.

Hoe het werkt

De affix-plug-in schakelt tussen drie klassen: .affix, .affix-top, en .affix-bottom. Elke klasse vertegenwoordigt een bepaalde staat. U moet CSS-eigenschappen toevoegen om de werkelijke posities te verwerken, met uitzondering van position:fixed op de .affixklasse.

• De plug-in voegt de klasse .affix-topof toe .affix-bottomom aan te geven dat het element zich in de bovenste of onderste positie bevindt. Positionering met CSS is op dit moment niet vereist.


• Als u voorbij het toegevoegde element scrolt, wordt de daadwerkelijke toevoeging geactiveerd - Dit is waar de plug -in de klasse .affix-topof vervangt .affix-bottomdoor de .affixklasse (sets position:fixed). Op dit punt moet u de CSS topof bottomeigenschap toevoegen om het toegevoegde element op de pagina te plaatsen.


• .affixAls een onderste offset is gedefinieerd, wordt de klasse vervangen door er voorbij te scrollen .affix-bottom. Aangezien offsets optioneel zijn, vereist het instellen van één dat u de juiste CSS instelt. Voeg in dit geval toe position:absoluteindien nodig.

In het eerste voorbeeld hierboven voegt de Affix-plug-in de .affixklasse (position:fixed) toe aan het <nav>-element wanneer we 197 pixels vanaf de bovenkant hebben gescrolld. Als u het voorbeeld opent, ziet u ook dat we de CSS - topeigenschap met een waarde van 0 aan de .affixklasse hebben toegevoegd. Dit is om ervoor te zorgen dat de navigatiebalk te allen tijde bovenaan de pagina blijft, wanneer we 197 pixels vanaf de bovenkant hebben gescrolld.

Scrollspy & Affix

De Affix-plug-in gebruiken samen met de Scrollspy- plug-in:

Volledige Bootstrap Affix-referentie

Ga voor een volledige referentie van alle affix-methoden en -gebeurtenissen naar onze Bootstrap JS Affix-referentie .