So legen Sie eine feste Positionierung im Bootstrap fest-Front-End-Fragen und Antworten-php.cn

So legen Sie eine feste Positionierung im Bootstrap fest

WBOY

Freigeben： 2022-05-06 15:26:55

Original

3310 Leute haben es durchsucht

In Bootstrap können Sie das Affix-Plugin verwenden, um die Positionierung jedes Elements über die benutzerdefinierten Attributdaten festzulegen. Die Syntax lautet „".

So legen Sie eine feste Positionierung im Bootstrap fest

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 3.3.7, DELL G3-Computer

So legen Sie eine feste Positionierung im Bootstrap fest

Feste Positionierung – Deklarative Trigger-Festpositionierung

Affix Das Plug-in kann für jedes Element verwendet werden. Für eine feste Positionierung besteht die einfachere Methode darin, es über die benutzerdefinierten Attributdaten auszulösen. Es enthält hauptsächlich zwei Parameter:

1. data-spy: Wertzusatz, der angibt, dass die Elemente festgelegt sind.

2. Daten-Offset: Ein ganzzahliger Wert wie 90 bedeutet, dass die Werte des oberen und unteren Elements jeweils 90 Pixel betragen. Es umfasst zwei Methoden: Daten-Offset-oben und Daten-Offset-unten .

data-offset-top wird verwendet, um den Abstand des Elements von der Oberseite festzulegen. Beispielsweise bedeutet 90, dass das Element 90 Pixel von oben entfernt ist. Wenn der Benutzer die Bildlaufleiste von oben nach unten zieht und der Bildlaufabstand größer als 90 Pixel ist, wird das Affix-Element nicht mehr gescrollt und oben fixiert Das Browserfenster.

data-offset-bottom ist genau das Gegenteil von data-offset-top.

Die spezifische Verwendung ist wie folgt:

<div data-spy="affix" data-offset="90">affix元素</div>

Nach dem Login kopieren

Stellen Sie die Datenoffset-Wertmethode separat ein:

<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>

Nach dem Login kopieren

Beachten Sie, dass die Scroll-Überwachung im Hauptteil deklariert werden muss.

<body data-spy="scroll" data-target="sidebarMenu">

Nach dem Login kopieren

Hinweis: Bitte sehen Sie sich den Effekt im Breitbildmodus an. Nach meinen Tests ist der Wert von data-offset-top bei Verwendung des deklarativen Stils ungültig. Sie müssen einen Top-Wert für Affix im Stil festlegen, der dem Wert von data-offset entspricht -Spitze. Identisch mit data-offset-bottom.

Verwandte Empfehlungen: Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie eine feste Positionierung im Bootstrap fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!