Question

所以我正在使用zurb基础框架中的默认.top-bar类，但是我找不到一个简单的方法来使导航栏“粘贴”（滚动时跟随用户），例如就像你可以用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

定位栏

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

Answer 2

您还可以将其命名为“粘性”，并将菜单放在页面的任何位置，当它到达顶部时，它会粘贴并跟随。

您也可以将顶部栏包装在div class =“contains-to-grid sticky”中并把它放在你的标记中的任何地方。当导航命中时在浏览器的顶部，它将像固定的顶部栏一样坚持用户继续滚动的顶部。 Link to Source

Answer 3

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

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

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

Zurb Foundation Sticky Nav Bar

3 个答案: