Die Bootstrap-Dokumentation zu diesem Thema ist für mich etwas verwirrend. Ich möchte ein ähnliches Verhalten wie in den Dokumenten mit der angehängten Navigationsleiste erzielen: Die Navigationsleiste befindet sich unter einer Absatz- / Seitenüberschrift. Beim Scrollen nach unten sollte zuerst gescrollt werden, bis der obere Rand der Seite erreicht ist, und dann für weitere Bildlaufvorgänge festgehalten werden .
Da jsFiddle nicht mit dem Navbar-Konzept funktioniert, habe ich eine separate Seite zur Verwendung als minimales Beispiel eingerichtet: http://i08fs1.ira.uka.de/~s_drr/navbar.html
Ich benutze dies als meine Navigationsleiste:
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
Ich denke, ich möchte data-offset-top
den Wert 0 haben (da der Balken ganz oben "bleiben" sollte, aber bei 50 ist zumindest ein Effekt zu beobachten.
Wenn Sie auch den Javascript-Code einfügen:
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
Jede Hilfe geschätzt.
quelle
.navbar-fixed-top
anstelle von affix ()?.navbar-fixed-top
würde die Navigationsleiste die ganze Zeit nach oben platzieren . Ich möchte einen Seitenkopf ÜBER der Navigationsleiste, und wenn Sie nach unten scrollen (und somit würde die Navigationsleiste weggescrollt), sollte er oben bleiben - dann und nur dann. Bootstrap-Dokumente verwendeten dieselben Mechanismen wie ein Subnav in ihren vorherigen Dokumenten. Leider haben sie diese für die 2.1.0-Dokumente entfernt.)};
sollte sein});
Antworten:
Ich hatte ein ähnliches Problem und glaube, ich habe eine verbesserte Lösung gefunden.
Geben Sie nicht
data-offset-top
in Ihrem HTML an. Geben Sie es stattdessen an, wenn Sie anrufen.affix()
:Der Vorteil hierbei ist, dass Sie das Layout Ihrer Site ändern können, ohne das
data-offset-top
Attribut aktualisieren zu müssen . Da hierbei die tatsächlich berechnete Position des Elements verwendet wird, werden auch Inkonsistenzen mit Browsern vermieden, die das Element an einer etwas anderen Position rendern.Sie müssen das Element weiterhin mit CSS nach oben klemmen. Außerdem musste ich
width: 100%
das nav-Element setzen, da sich.nav
Elementeposition: fixed
aus irgendeinem Grund schlecht benehmen:Eine letzte Sache: Wenn ein angebrachtes Element fixiert wird, nimmt sein Element keinen Platz mehr auf der Seite ein, was dazu führt, dass die darunter liegenden Elemente "springen". Um diese Hässlichkeit zu verhindern, wickle ich die Navigationsleiste in eine ein,
div
deren Höhe ich zur Laufzeit so eingestellt habe, dass sie der Navigationsleiste entspricht:.
Hier ist die obligatorische jsFiddle, um sie in Aktion zu sehen .
quelle
Ich habe dies gerade zum ersten Mal implementiert und hier ist, was ich gefunden habe.
Der
data-offset-top
Wert ist die Anzahl der Pixel, die Sie scrollen müssen, damit der Fixierungseffekt stattfindet. In Ihrem Fall50px
wird die Klasse Ihres Elements nach dem Scrollen von.affix-top
auf geändert.affix
. Sie möchten wahrscheinlich in Ihrem Anwendungsfalldata-offset-top
ungefähr festlegen130px
.Sobald diese Klassenänderung erfolgt ist, müssen Sie Ihr Element in CSS positionieren, indem Sie die Positionierung für die Klasse festlegen
.affix
. Bootstrap 2.1 ist bereits so definiert.affix
,position: fixed;
dass Sie lediglich Ihre eigenen Positionswerte hinzufügen müssen.Beispiel:
quelle
.navbar
ob die Klasse erhalten bleibt - sind Sie sicher?Um genau dieses Problem zu beheben, habe ich das Affix-Plugin so geändert, dass es ein jQuery-Ereignis ausgibt, wenn ein Objekt angebracht oder nicht angehängt wird.
Hier ist die Pull-Anfrage: https://github.com/twitter/bootstrap/pull/4712
Und der Code: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js
Führen Sie dann die folgenden Schritte aus, um die Navigationsleiste anzubringen:
quelle
Sie müssen
.affix()
aus Ihrem Skript entfernen .Bootstrap bietet die Möglichkeit, Dinge
data-attributes
meistens entweder über oder direkt über JavaScript zu erledigen .quelle
Ich habe dies aus dem Quellcode des Twitterbootstraps und es funktioniert ziemlich gut:
HTML:
CSS:
JS:
quelle
Sie müssen nur das Skript entfernen. Hier ist mein Beispiel:
quelle
Vielen Dank an namuol und Dave Kiss für die Lösung. In meinem Fall hatte ich ein kleines Problem mit der Höhe und Breite der Navigationsleiste, als ich Afflix- und Collapse-Plugins zusammen verwendete. Das Problem mit der Breite kann leicht gelöst werden, indem es vom übergeordneten Element (in meinem Fall Container) geerbt wird. Ich könnte es auch schaffen, dass es mit ein bisschen Javascript (eigentlich Coffeescript) reibungslos zusammenbricht. Der Trick besteht darin, die Höhe des Wrappers auf
auto
vor dem Umschalten des Zusammenbruchs einzustellen und danach wieder zu korrigieren.Markup (haml):
CSS:
Coffeescript:
quelle
Meine Lösung zum Anbringen der Navigationsleiste:
quelle
Ähnlich wie bei der akzeptierten Antwort können Sie auch Folgendes tun, um alles auf einmal zu erledigen:
Dadurch wird nicht nur das
affix
Plugin aufgerufen, sondern auch das angehängte Element in ein div eingeschlossen, das die ursprüngliche Höhe der Navigationsleiste beibehält.quelle