4

所以我使用了.top-barzurb 基础框架中的默认类，但是我没有找到一种简单的方法来使导航栏“粘性”（在用户滚动时跟随用户），例如您可以使用 Twitter 引导程序。

这是我的代码，我正在使用玉：

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

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

4

3 回答 3

8

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

定位酒吧

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

于 2013-01-03T15:21:47.243 回答
0

你也可以给它一个“ sticky ”类，让菜单位于页面的任何位置，当它到达顶部时，它会粘住并跟随。

您也可以将顶部栏包裹在 div class="contain-to-grid sticky" 中，并将其放在标记中的任何位置。当导航到达浏览器顶部时，它将像固定的顶部栏一样，并随着用户继续滚动而粘在顶部。 链接到源

于 2013-06-21T07:30:13.487 回答
0

为了让你的 .top-bar 工作顺利，你需要用单独的 div 包装它，比如

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

我发现这适用于我调整大小的浏览器和 iphone Chrome。

于 2013-09-20T11:34:31.967 回答