Foundation 6 Magellan sticky不能與Zurb模板一起工作cli install

Question

我正在嘗試在Zurb fdn6模板的cli安裝中使用Magellan。該網頁運行良好，但麥哲倫只是不爲粘性導航工作，並拋出以下控制檯錯誤：
Uncaught TypeError: Cannot read property 'top' of undefined

這樣看來麥哲倫註冊因爲DevTools查看源代碼時，我可以看到data-sticky attr註冊一個值，當向上/向下滾動時，類將被應用於錨點。

但是，我注意到類不是註冊是：is-at-top is-stuck這些似乎是什麼讓事情'棒'。它們出現在Zurb文檔示例中。

在app.js我有$(document).foundation();當頁面運行時，我可以看到Magellan模塊實際上正在加載。但粘性導航只是不堅持到窗口的頂部，它只是不能在這個設置。

我使用從Zurb Fdn Magellan docs:

<div data-sticky-container> 
    <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-top-anchor="topAnchorExample" data-btm-anchor="bottomOfContentId:bottom"> 
     <nav data-magellan> 
      <ul class="horizontal menu expanded"> 
       <li><a href="#first">First Arrival</a></li> 
       <li><a href="#second">Second Arrival</a></li> 
       <li><a href="#third">Third Arrival</a></li> 
      </ul> 
     </nav> 
    </div> 
</div> 

以下標準例如我已經看到其他SO實例固定的，但它們似乎都使用除Zurb tempate構建其他一般加載經由標準<script src="xyz">呼叫的插件。

有人知道這個Zurb模板的例子嗎？

Answer 1

與F5不同的是，在Foundation 6中製作元素很困難，坦率地說，這有點棘手和令人沮喪。你不只是第一次嘗試。

在F6，使麥哲倫或任何元件粘，需要一種參考點到激活粘性。

在這種情況下，您需要將根div的編號爲topAnchorExample，然後編寫下一組magellan生成代碼。

嘗試這樣做：

<div id="topAnchorExample"> 
    <div data-sticky-container> 
     <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-top-anchor="topAnchorExample" data-btm-anchor="bottomOfContentId:bottom"> 
     <nav data-magellan> 
     <ul class="horizontal menu expanded"> 
      <li><a href="#first">First Arrival</a></li> 
      <li><a href="#second">Second Arrival</a></li> 
      <li><a href="#third">Third Arrival</a></li> 
     </ul> 
     </nav> 
     </div> 
    </div> 
    </div> 

而且儘量不要提內嵌CSS - 寬度：100％。我想你會照顧的。