javascript - Foundation 6 Magellan 粘性无法与 Zurb 模板 cli 安装一起使用

Question

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

Magellan 似乎正在注册，因为在 DevTools 中查看源代码时，我可以看到 data-sticky attr 注册一个值，和 active向上/向下滚动时，类将应用于 anchor 。

但是，我确实注意到未注册的类是: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 模板以外的构建，并且通常通过标准 <script src="xyz"> 加载插件来电。

有人知道这个 Zurb 模板示例是怎么回事吗？

Answer 1

与 F5 不同，坦白说，在 Foundation 6 中使元素具有粘性有点棘手且令人沮丧。您不会在第一次尝试中就得到它。

在 F6 中，要使麦哲伦或任何元素具有粘性，需要一个引用点来激活粘性。

在这种情况下，您需要有一个 id 为 topAnchorExample 的根 div，然后编写下一组 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 - width:100%。我想你会处理好这个问题的。