Foundation 6 Sticky Topbar Navigation - 立即触发/过早触发答案

【问题标题】：Foundation 6 Sticky Topbar Navigation - Triggers immediately/too earlyFoundation 6 Sticky Topbar Navigation - 立即触发/过早触发
【发布时间】：2016-12-18 04:49:43
【问题描述】：

使用 Foundation 6，我正在尝试创建一个粘性顶栏，当到达the F6 documentation 之后，它会粘在页面顶部。

但是，它会在滚动页面后立即卡住（太早），而不是在到达顶部时：jsbin

使用纯粹的示例代码，这似乎不起作用？

<div class="row">
    <div class="columns small-12">
      <div data-sticky-container>
        <div class="top-bar" data-sticky data-options="marginTop:0;" style="width:100%">
          <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
              <li class="menu-text">Site Title</li>
              <li>
                <a href="#">One</a>
                <ul class="menu vertical">
                  <li><a href="#">One</a></li>
                  <li><a href="#">Two</a></li>
                  <li><a href="#">Three</a></li>
                </ul>
              </li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </div>
          <div class="top-bar-right">
            <ul class="menu">
              <li><input type="search" placeholder="Search"></li>
              <li><button type="button" class="button">Search</button></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

【问题讨论】：

标签： jquery html css zurb-foundation

【解决方案1】：

您可以通过将data-top-anchor 设置为data-sticky-container div 来实现此功能。

<div id="item1" class="flex-child-auto" data-sticky-container>
  <div class="top-bar sticky" data-sticky data-options="marginTop:0;" style="width:100%" data-top-anchor="item1">
  </div>
</div>

我在codepen 上创建了一个示例。

【讨论】：