基金会6麦哲伦不使用Zurb模板cli安装

Question

我试图在Zurb fdn6模板的cli安装中使用麦哲伦。该页面运行良好，但麦哲伦对粘性导航不起作用，并引发以下控制台错误：

Uncaught TypeError: Cannot read property 'top' of undefined

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

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

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

我使用了来自Zurb Fdn麦哲伦博士：的以下标准示例

<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>

我见过其他这样的例子，但它们似乎都使用了Zurb之外的构建，并且通常通过标准的<script src="xyz">调用加载插件。

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

Answer 1

与F5不同的是，坦率地说，让Foundation6中的元素变得粘稠有点棘手和令人沮丧。你不可能在第一次尝试的时候就得到它。

在F6中，要使麦哲伦或任何元素粘稠，需要一个参考点来激活粘性。

在本例中，您需要有一个带有id div的根topAnchorExample，然后编写下一组麦哲伦生成代码。

尝试这样做：

    <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%。我想你会处理好的。