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();，当页面运行时，我可以看到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不同，在基金会6中制作元素是有点棘手的，坦白说是有点棘手和令人沮丧。你不会在第一次尝试时得到它。

在F6中，为了使magellan或任何元素变得粘稠，激活粘性需要参考点。

在这种情况下，您需要拥有标识为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 - 宽度：100％。我猜你会照顾的。

基础6麦哲伦粘不使用Zurb模板cli安装

1 个答案: