it-swarm.com.de

Wie erstelle ich mit bootstrap 3 ein klebriges Menü in der linken Seitenleiste?

Ich möchte mit bootstrap 3 wie folgt ein linksklebiges Barmenü erstellen:

http://getbootstrap.com/getting-started/

Ich habe die angegebene Dokumentation gelesen http://getbootstrap.com/javascript/#affix

Ich versuche es mit .affix aber das Ergebnis ist Null.


Update : @Skelly,
Danke für Ihr freundliches Beispiel. und ja, ich möchte dein Beispiel. Ich habe Ihr Beispiel-HTML heruntergeladen, aber nach dem Herunterladen hat die Seitenleiste der HTML-Datei dort nicht funktioniert.

33
Sohag-Monist It

Bootstrap 3

Hier ist ein funktionierendes Beispiel für die linke Seitenleiste:

http://bootply.com/90936 (ähnlich den Bootstrap docs)

Der Trick besteht darin, die affix -Komponente zusammen mit etwas CSS zu verwenden, um sie zu positionieren:

  #sidebar.affix-top {
    position: static;
    margin-top:30px;
    width:228px;
  }

  #sidebar.affix {
    position: fixed;
    top:70px;
    width:228px;
  }

[~ # ~] edit [~ # ~] - Ein weiteres Beispiel mit Fußzeile und unten


Bootstrap 4

Die Affix-Komponente wurde in Bootstrap= 4 entfernt. Um eine klebrige Seitenleiste zu erstellen, können Sie ein Drittanbieter-Affix-Plugin verwenden wie folgt Bootstrap 4 klebrige Seitenleiste Beispiel , oder verwenden Sie die sticky-top Klasse ist in dieser Antwort erklärt .

Verwandte: Erstellen Sie eine ansprechende Navigationsleiste "Schublade" in Bootstrap 4?

47
Zim

Sie können auch versuchen, eine Polyfüllung wie Fixed-Sticky zu verwenden. Insbesondere wenn Sie Bootstrap4 verwenden, ist die Komponente affixnicht mehr enthalten :

Das Affix jQuery-Plugin wurde entfernt. Wir empfehlen die Verwendung einer Position: stattdessen klebrige Polyfüllung.

6
H6.

Ich habe diesen Weg in meinem Code benutzt

$(function(){
    $('.block').affix();
})
4
Evgeniy