Zurb Foundation Sticky Nav Bar

So, ich bin mit dem Standard - .top-bar - Klasse aus dem zurb foundation framework, aber ich bin falls suchen Sie eine einfache Möglichkeit, um die nav bar 'sticky' (folgt der Benutzer, wie er Schriftrollen), wie Sie tun können, mit Twitter bootstrap.

Hier ist mein code, ich bin mit 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

Bin ich etwas fehlt ganz klar hier?

Es ist ganz einfach, werden Sie wahrscheinlich nur angekratzt haben es in der Dokumentation. Ich habe die Antwort und den link.

InformationsquelleAutor Connor Black | 2013-01-01

  1. 8

    Aus der docs-Seite: http://foundation.zurb.com/docs/navigation.php

    Positionierung der Bar

    In der oberen Leiste ist mit einem single-nav-element mit der Klasse top-bar. Es wird auf die volle browser-Breite standardmäßig. Machen die top bar befestigt bleiben, wie Sie Blättern, wickeln Sie es in div class="fixed". Wenn Sie möchten, dass Ihre navigation in der Breite des Rasters, wickeln Sie es in div class="enthalten-to-grid". Sie können mit festen und enthalten-zu-grid zusammen.

    Link ist jetzt tot seit Zurb aktualisiert alle Ihrer Dokumentation für Foundation 4. Um dies in den 4, legte div class="enthalten-zu-grid-sticky" überall auf Ihre navigation markup. Weitere Informationen unter: foundation.zurb.com/docs/components/top-bar.html.
    foundation.zurb.com/old-docs/f3/navigation.php existiert noch und wird noch unterstützt
    "überall auf Ihre navigation markup" -> was bedeutet das?
    Er sagt: "überall in Ihrem markup" nicht "überall auf Ihre navigation markup", das heißt, Sie können einen sticky-Leiste an einer beliebigen Stelle in der HTML.
    link ist jetzt leider auch tot. Hier ist die Seite für F5: foundation.zurb.com/sites/docs/v/5.5.3/components/topbar.html - und die F6: foundation.zurb.com/sites/docs/top-bar.html

    InformationsquelleAutor Ed Charbeneau

  2. 0

    Sie können auch geben es die Klasse "sticky" und haben das Menü überall auf Ihrer Seite, und wenn es schlägt, oben wird es bleiben und Folgen.

    Können Sie auch wickeln Sie Ihren top-bar div class="enthalten-zu-grid-sticky"
    und setzen Sie überall in Ihrem markup. Wenn die navigation trifft den
    oben im browser, es wird wirken wie die Feste Obere Leiste, und halten
    die oben als Benutzer weiter Blättern.
    Link zur Quelle

    InformationsquelleAutor Tensai

  3. 0

    Machen Ihre .top-bar funktioniert gut und reibungslos funktioniert, müssen Sie wickeln Sie es mit einem separaten div, wie

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

    Fand ich dies ganz gut funktioniert mit meinem browser in der Größe verändert und iphone Chrome.

    InformationsquelleAutor Koo Jeng Tong

Schreibe einen Kommentar