navigation - Zurb Foundation 粘性导航栏

Question

所以我使用默认 .top-bar来自 zurb 基础框架的类，但我没有找到一种简单的方法来使导航栏“粘性”(在用户滚动时跟随用户)，例如您可以使用 Twitter bootstrap 。

这是我的代码，我使用的是 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

我在这里错过了一些完全明显的东西吗？

Answer 1

从文档页面:http://foundation.zurb.com/docs/navigation.php

定位条

顶部栏是用单个导航元素构建的，其中包含一个 top-bar 类。默认情况下，它将采用完整的浏览器宽度。要使顶部栏在滚动时保持固定，请将其包裹在 div 中class="fixed" .如果您希望将导航设置为网格宽度，请将其包装在 div class="contain-to-grid"中。您可以同时使用固定和包含到网格。