/ / Zurb Foundation Sticky Nav Bar - Navigation, Mops, Sticky, Zurb-Foundation

Zurb Foundation Sticky Nav Bar - Navigation, Mops, Sticky, Zurb-Foundation

Also benutze ich den Standard .top-bar Klasse aus dem Rahmen der Umgebung von Zurb, aber ich finde einen einfachen Weg, um die Navigationsleiste "sticky" (folgt dem Benutzer, wie er scrollt), wie Sie mit Twitter Bootstrap tun können.

Hier ist mein Code, ich benutze Jade:

nav.top-bar
ul
li.name
h1
a(href="#") Site Title
li.toggle-topbar
a(href="#")

section
ul.left
li.divider
li
a.active(href="#") Link
li.divider
li
a.active(href="#") Link
li.divider
li
a.active(href="#") Link
li.divider
li
a.active(href="#") Link
li.divider
section
ul.right
li.divider
li.has-dropdown
a.active(href="#") Log in

Fehle ich hier etwas völlig Offensichtliches?

Antworten:

8 für die Antwort № 1

Auf der Dokumentseite: http://foundation.zurb.com/docs/navigation.php

Positionieren der Bar

Die obere Leiste besteht aus einem einzelnen Navigationselement mit einer Klasse von oberen Balken. Es wird standardmäßig die volle Browserbreite annehmen. Um den oberen Balken während des Scrollens fixiert zu halten, wickeln Sie ihn in div class="fixed". Wenn Sie möchten, dass Ihre Navigation auf Ihre Gitterbreite eingestellt wird, fügen Sie sie in div class = "contain-to-grid" ein. Sie können fixed und contain-to-grid zusammen verwenden.


0 für die Antwort № 2

Sie können ihm auch die Klasse geben "klebrig"und das Menü irgendwo auf Ihrer Seite finden, und wenn es oben ankommt, wird es haften und folgen.

Sie können Ihre obere Leiste auch in div einschließenclass = "contain-to-grid-sticky" und legen Sie es irgendwo in Ihrem Markup. Wenn die Navigation auf die Oben im Browser verhält es sich wie die feste obere Leiste und bleibt bei die Oberseite, während Benutzer weiter scrollen. Link zur Quelle


0 für die Antwort № 3

Um Ihre .top-bar gut und reibungslos arbeiten zu können, müssen Sie sie mit einem separaten div-Element wie z

<div class="sticky">
<div class="contain-to-grid">
<nav>
...
</nav>
</div>
</div>

Ich fand das ziemlich gut mit meinem resized Browser und iphone Chrome.