首页 文章

Zurb Foundation Sticky Nav Bar

提问于
浏览 次
4

所以我使用的是zurb基础框架中的默认 .top-bar 类，但我是'm failing a find a simple way to make the nav bar ' sticky'（跟随用户滚动），例如你可以使用Twitter bootstrap .

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

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

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

navigation pug sticky zurb-foundation

3 回答

  • 0

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

    Positioning the Bar

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

    回复于
  • 0

    您也可以将它命名为“ sticky ”，并将菜单放在页面的任何位置，当它到达顶部时它会粘住并跟随 .

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

    回复于
  • 8

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

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

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

    回复于

相关问题