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