javascript - Foundation 6 Magellan sticky not working with Zurb template cli install

Question

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

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.

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.

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.

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>

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.

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

Answer 1

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.

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

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

Try doing this :

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

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