Zurb Foundation Sticky Nav Bar

问题:

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?

回答1:

From the docs page: http://foundation.zurb.com/docs/navigation.php

Positioning the Bar

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.

回答2:

You can also give it the class "sticky" and have the menu located anywhere on your page, and when it hits the top it will stick and follow.

You may also wrap your top bar in div class="contain-to-grid sticky" and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll. Link to Source

回答3:

To make your .top-bar work nicely and smoothly, you need to wrap it with separate div, like

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

I found this works quite well with my resized browser and iphone Chrome.