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％。我想你会照顾的。