Question

我正在努力将现有的基础3应用程序升级到新的基础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应该可以正常工作吗？

由于

-James

Answer 1

在阅读了foundation.topbar.js后，我发现只有topbarContainer具有“sticky”类才会导致分配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在网上的文档非常棒。我希望有一个例子可以在那里找到一个粘顶棒。

谢谢！

-James

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

1 个答案: