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

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

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

但是，我确实注意到未注册的类是：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模板示例怎么了吗？

最佳答案

与F5不同，在Foundation 6中使元素变粘会有些棘手和坦率。您不仅会在第一次尝试中得到它。

在F6中，为使粗胶布或任何元素发粘，需要一个参考点来激活发粘。

在这种情况下，您需要具有ID为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-width：100％。我想你会照顾的。

关于javascript - Foundation 6 Magellan Sticky无法与Zurb模板cli安装一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38409034/