基础 6 麦哲伦粘性不适用于 Zurb 模板 cli 安装

Question

我正在尝试在Zurb fdn6模板的cli安装中使用Magellan。页面运行良好，但 Magellan 不适用于粘性导航并引发以下控制台错误：
Uncaught TypeError: Cannot read property 'top' of undefined

看起来 Magellan 正在注册，因为在 DevTools 中查看源代码时，我可以看到data-sticky attr 注册了一个值，并且在向上/向下滚动时active类正在应用于锚点。

但是，我确实注意到未注册的类是：is-at-top is-stuck，这些似乎是使事情"粘住"的原因。它们显示在 Zurb 文档示例中。

app.js我有$(document).foundation();，当页面运行时，我可以看到麦哲伦模块实际上正在加载。但是粘性导航只是没有粘在窗口顶部，它只是在此设置中不起作用。

我使用了Zurb Fdn Magellan文档中的以下标准示例：

<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中，为了使麦哲伦或任何元素具有粘性，需要一个参考点来激活粘性。

在这种情况下，您需要有一个具有 id topAnchorExample 的根div，然后编写下一组麦哲伦生成代码。

尝试这样做：

    <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%。我想你会照顾好这一点。