基础5.0.3刚刚下载，顶栏粘不通

Question

I'm working on upgrading an existing foundation 3 app to the new foundation 5.

I have the JS loaded fine: <script src="js/foundation/foundation.topbar.js"></script>

But I'm seeing this error upon scroll: TypeError: this.settings.sticky_topbar is undefined

I've triple checked that I'm using v 5.0.3 straight off the Zurb website, and my markup is very simple:

<nav class="top-bar sticky" data-topbar="">
  <!-- Title -->
  <ul class="title-area">
    <li class="name"><h1><a href="#">Sexy Top Bar</a></h1></li>

    <!-- Mobile Menu Toggle -->
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <!-- Top Bar Section -->
  <section class="top-bar-section">

    <!-- Top Bar Left Nav Elements -->
    <ul class="left">

      <!-- Search | has-form wrapper -->
      <li class="has-form">
        <div class="row collapse">
          <div class="large-8 small-9 columns">
            <input placeholder="Find Stuff" type="text">
          </div>
          <div class="large-4 small-3 columns">
            <a href="#" class="alert button expand">Search</a>
          </div>
        </div>
      </li>

    </ul>

  </section>
</nav>

Any ideas would be very much appreciated! I know this sort of behavior was previously reported as a bug in earlier versions, but everything I can find online says 5.0.3 should work fine?

Thanks

-James

Answer 1

After reading through foundation.topbar.js, I see that only the topbarContainer having the "sticky" class will cause self.settings.sticky_topbar to be assigned.

So, adding a div.sticky above the nav fixes everything. Here's my new markup if anyone cares to see it:

<div class="sticky">
  <nav class="top-bar" data-topbar>
    <!-- Title -->
    <ul class="title-area">
      <li class="name"><h1><a href="#">Sexy Top Bar</a></h1></li>

      <!-- Mobile Menu Toggle -->
      <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
    </ul>

    <!-- Top Bar Section -->
    <section class="top-bar-section">

      <!-- Top Bar Left Nav Elements -->
      <ul class="left">

        <!-- Search | has-form wrapper -->
        <li class="has-form">
          <div class="row collapse">
            <div class="large-8 small-9 columns">
              <input placeholder="Find Stuff" type="text">
            </div>
            <div class="large-4 small-3 columns">
              <a href="#" class="alert button expand">Search</a>
            </div>
          </div>
        </li>  

      </ul>

    </section>
  </nav>
</div>

Normally Zurb is so awesome at their documentation online. I wish there was an example for a sticky top bar in there somewhere.

Thanks!

-James