javascript - Foundation 5.0.3 刚刚下载，顶栏粘滞不工作

Question

我正在努力将现有的 foundation 3 应用程序升级到新的 foundation 5。

我已经很好地加载了 JS:<script src="js/foundation/foundation.topbar.js"></script>

但是我在滚动时看到这个错误:TypeError: this.settings.sticky_topbar is undefined

我已经三重检查我使用的是直接来自 Zurb 网站的 v 5.0.3，而且我的标记非常简单:

<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>

任何想法将不胜感激!我知道这种行为之前在早期版本中被报告为错误，但我在网上找到的所有内容都说 5.0.3 应该可以正常工作？

谢谢

-詹姆斯

Answer 1

阅读完 foundation.topbar.js 后，我发现只有具有“sticky”类的 topbarContainer 才会导致分配 self.settings.sticky_topbar。

因此，在导航上方添加一个 div.sticky 可以解决所有问题。如果有人想看的话，这是我的新标记:

<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>

通常 Zurb 的在线文档非常棒。我希望某处有一个粘性顶部栏的示例。

谢谢!

-詹姆斯