Zurb基金会粘性导航栏 [英] Zurb Foundation Sticky Nav Bar

问题描述

因此，我使用的是zurb基础框架中的默认.top-bar类，但我没有找到一种使导航栏粘滞"(跟随用户滚动)的简单方法，例如您可以使用Twitter引导程序.

So I'm using the default .top-bar class from the zurb foundation framework, but I'm failing a find a simple way to make the nav bar 'sticky' (follows the user as he scrolls), such as you can do with Twitter bootstrap.

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

Here's my code, I'm using 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

我在这里遗漏了一些显而易见的东西吗?

Am I missing something completely obvious here?

推荐答案

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

定位栏

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

The top bar is built with a single nav element with a class of top-bar. It will take on full browser width by default. To make the top bar stay fixed as you scroll, wrap it in div class="fixed". If you want your navigation to be set to your grid width, wrap it in div class="contain-to-grid". You may use fixed and contain-to-grid together.

这篇关于Zurb基金会粘性导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！