1

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

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

但是，我确实注意到没有注册的课程是：is-at-top is-stuck这些似乎是让事情“坚持”的原因。它们出现在 Zurb 文档示例中。

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

我使用了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 模板示例是怎么回事？

4

1 回答 1

0

与 F5 不同，在 Foundation 6 中使元素具有粘性有点棘手，坦率地说，令人沮丧。你不只是在第一次尝试中得到它。

在 F6 中，要使 magellan 或任何元素具有粘性，需要一个参考点来激活粘性。

在这种情况下，您需要有一个div带有 id的根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 - width:100%。我想你会照顾好它的。

于 2016-07-16T13:42:47.483 回答