Ich arbeite in der Kernadministrationsstruktur von Bootstrap und habe einen Hauptkopf oben auf der Seite und dann einen Unterkopf darunter. Ich versuche zuzulassen, dass der Sub-Header am oberen Rand der Seite repariert wird, wenn der Benutzer nach unten scrollt, damit er immer diese Informationen sehen kann, aber ich habe ein bisschen Ärger.
Der Abschnitt, den ich gerne oben behalten möchte, sieht so aus.
%Vor% und ich habe bisher versucht, das in ein anderes div mit den navbar navbar-fixed-top -Klassen einzubetten. Aber das hat es sofort nach oben geschossen und den Content überlagert, der gesehen werden muss.
Ich habe auch versucht, einfach css zu verwenden, indem ich position:fixed; zum aktuellen div hinzufüge, aber das vermasselt die Brotkrumen, die ich darunter lege, weil es es aus dem Fluss herausnimmt.
Gibt es das sowieso nur mit CSS? Ich weiß, dass ich mit jQuery einen Hack machen kann, aber in meinem Team bin ich nur für das CSS zuständig.
Sie können unter css auf die Navigationsleiste der Unterüberschrift zugreifen.
css:
%Vor%Fügen Sie der Sub-Kopfzeile eine "sticky-top" -Klasse hinzu.
für zB: Sie können die Fiedel sehen, unter der die Frage ähnlich ist. Hier wird das zweite Menü oben fixiert, wenn der Benutzer scrollt.
position: fixed ist der Weg dorthin. Können Sie dem div, das Sie fixieren möchten, eine Höhe zuweisen und einen Rand auf die Breadcrumbs anwenden?
%Vor%Mein Standpunkt ist folgender. Wenn Sie darum bitten:
to fix to the top of the page when the user scrolls down
Dies bedeutet, dass Sie erkennen müssen, wenn Benutzer scrollen. Außerdem gibt es keinen anderen Weg als js / jQuery, um diese Art von Aktion zu erkennen. CSS kann ein Teil der Lösung sein, indem Sie beispielsweise eine Klasse erstellen, die Ihr Menü festhält, aber Sie benötigen immer ein bisschen js, um zu erkennen, wann Sie die Klasse einfügen und entfernen müssen.
Hier ist ein Beispiel, wie man das in jQuery macht:
%Vor%Vergessen Sie nicht, dass jede "fortgeschrittene" Aktion, die eine Änderung im DOM erkennen muss oder eine Benutzerinteraktion benötigt, JS oder PHP benötigt, um damit umzugehen. Mit "fortgeschritten" meine ich alle Dinge, die nativ in HTML nicht behandelt werden können.
Tags und Links css twitter-bootstrap