基盤6スティッキートップバーナビゲーション - すぐに/早すぎるトリガー

Question

基盤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-sticky-container div要素にdata-top-anchorを設定することで、仕事を得ることができます。

<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に例を作成しました。