基础6麦哲伦粘不使用Zurb模板cli安装 [英] Foundation 6 Magellan sticky not working with Zurb template cli install

问题描述

我正在尝试在Zurb fdn6模板的cli安装中使用Magellan。页面运行正常，但Magellan不适用于粘性导航并抛出以下控制台错误：

未捕获TypeError：无法读取未定义的属性top

I'm trying to use Magellan in a cli install of the Zurb fdn6 template. The page is running fine but Magellan just doesn't work for the sticky nav and throws the following console error:
Uncaught TypeError: Cannot read property 'top' of undefined

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

It would appear Magellan is registering because when viewing the source in DevTools I can see the data-sticky attr registering a value, and active class is being applied to the anchors when scrolling up/down.

但是，我注意到不注册的类是： is-at-top is-stuck 和这些似乎是让事情坚持的原因。它们出现在Zurb文档示例中。

However, I do notice classes that aren't registering are: is-at-top is-stuck and these appear to be what makes the thing 'stick'. They show up in the Zurb docs example.

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

In app.js I have $(document).foundation(); and when the page runs I can see that the Magellan module is actually loading. But the sticky nav just isn't sticking to the top of the window, it just doesn't work in this setup.

我使用了以下标准示例 Zurb Fdn Magellan docs：

I've used the following standard example from 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> 来加载插件。

I've seen other SO examples fixed but they all seemed to use builds other than the Zurb tempate and generally loaded the plugins via standard <script src="xyz"> calls.

有谁知道什么是这个Zurb模板示例？

Does anyone know what's up with this Zurb template example?

推荐答案

与F5不同，在基金会6中制作元素是有点棘手的，坦率地说是令人沮丧的。你不只是在第一次尝试时得到它。

Unlike F5, making elements sticky in Foundation 6 is a bit tricky and frustrating to be frank. You don't just get it in the first try.

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

In F6, to make the magellan or any element sticky, a reference point is needed to activate the stickiness.

在这种情况下，你需要一个root div 使用id topAnchorExample 然后编写下一组magellan生成代码。

In this case, you need to have a root div with the id topAnchorExample and then write the next set of magellan generating codes.

尝试这样做：

    <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％。我猜你会照顾的。

And try not to mention the inline css - width:100%. I guess you will take care of that.

这篇关于基础6麦哲伦粘不使用Zurb模板cli安装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！