Foundation 6 Sticky Topbar Navigation - 立即/太早触发

Question

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

Answer 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上创建了一个示例。