Search code examples
zurb-foundationmagellan

How to add class to Foundation 5 Magellan after it is cloned

I am utilizing Foundation 5's Magellan to fix a header to the top of the window when the page content is scrolled. However, I am not using arrival points.

Normally my HTML looks like this:

<article>
    <header data-magellan-expedition="fixed">
        <h3>title</h3>
    </header>
</article>

But, when Magellan is fired, the source changes to:

<article>
    <header data-magellan-expedition-clone style>
        <h3>title</h3>
    </header>
    <header data-magellan-expedition="fixed" style="position: fixed; top: 0px;">
        <h3>title</h3>
    </header>
</article>

Foundation allows for an active class to be set, but because I am not using the arrival points, I cannot utilize that functionality.

How do I set a class to the <header data-magellan-expedition="fixed" style="position: fixed; top: 0px;"> only after its fired?

Or, how can I call it specifically in CSS?

Thanks for your help.

Solution

  • It seems the way to do this in css is:

    header[style="position:fixed;"] { ... }

    Didn't realize it was that easy!