Menu icon Foundation
Magellan not sticky!

Hi, first post here, most likely not the last. I'm learning Foundation 5 and I'm trying to get Magellan nav to work, sadly it just goes up and doesn't stick as i scroll, attached is the code, i am including all the right JS files (i've checked). I'm using angular js as well on this app, hence the ng directives, e.g. repeat and the ng-if statements.
Any help very much appreciated at this early stage in procedings

<div data-magellan-expedition="fixed">
    <hr />
    <dl class="sub-nav">
        <dd ng-repeat="product in products" data-magellan-arrival="{{product.Name}}" class="active" ng-if="product.ProductID == '1'">
            <a href="#{{product.Name}}">{{product.Name}}</a>
        </dd>
        <dd ng-repeat="product in products" data-magellan-arrival="{{product.Name}}" ng-if="product.ProductID != '1'">
            <a href="#{{product.Name}}">{{product.Name}}</a>
        </dd>
    </dl>
    <hr />
</div>
<div ng-repeat="product in products">
    <div style="height: 100px; display: block;"></div>
    <hr />
    <a name="{{product.Name}}"></a>
    <h3 data-magellan-destination="{{product.Name}}">{{product.Name}}</h3>
    <p>{{product.ProductDescription}}</p>
</div>

MagellanSubNavSticky navnav

Hi, first post here, most likely not the last. I'm learning Foundation 5 and I'm trying to get Magellan nav to work, sadly it just goes up and doesn't stick as i scroll, attached is the code, i am including all the right JS files (i've checked). I'm using angular js as well on this app, hence the ng directives, e.g. repeat and the ng-if statements.
Any help very much appreciated at this early stage in procedings

<div data-magellan-expedition="fixed">
    <hr />
    <dl class="sub-nav">
        <dd ng-repeat="product in products" data-magellan-arrival="{{product.Name}}" class="active" ng-if="product.ProductID == '1'">
            <a href="#{{product.Name}}">{{product.Name}}</a>
        </dd>
        <dd ng-repeat="product in products" data-magellan-arrival="{{product.Name}}" ng-if="product.ProductID != '1'">
            <a href="#{{product.Name}}">{{product.Name}}</a>
        </dd>
    </dl>
    <hr />
</div>
<div ng-repeat="product in products">
    <div style="height: 100px; display: block;"></div>
    <hr />
    <a name="{{product.Name}}"></a>
    <h3 data-magellan-destination="{{product.Name}}">{{product.Name}}</h3>
    <p>{{product.ProductDescription}}</p>
</div>
Brandon almost 5 years ago

I am in the same situation.. .. .. .. was there any resolution to this? It was over 2 months ago.

"Any help very much appreciated at this early stage in procedings."

Wing-Hou Chan almost 5 years ago

Howdy Everyone!

Is it possible you post a link to the site in development? It would help diagnosis!

Brandon almost 5 years ago

Howdy back to ya, Thanks for taking a look.. ..

Here is my single page site:
http://declaredrepaired.com/dev/notmagellan.html

I'm new to Foundation, and also new to using CodeKit to set everything up..

I can confirm the file references are correct.

Any help is greatly appreciated!

Wing-Hou Chan almost 5 years ago

Hmmm, interesting problem.

I did a test on CodePen using Foundation via ZURB's CDN and it appears to be working there.

On your site there aren't any console errors and Orbit seems to be working so I'm going to assume foundation.js is fine.

And also your markup for Magellan seems to be correct.

So either foundation.magellan.js has a problem or where you have placed your script is.

Could you move your scripts to the end of the document as recommended here: http://foundation.zurb.com/docs/javascript.html

It may solve the problem, however I'm skeptical, as placing scripts at the end of the document is more of a performance thing.

If this doesn't work, I would recommend updating to Foundation v5.2.2, which has just come out!

No console errors and the code validating makes it slightly difficult to debug.

Patrick Oberdorfer over 4 years ago

Well i don't know if the problem was resolved?! I ran into something similar.

i found out the the css option "overflow: hidden" as also "overflow-x:hidden" breaks the sticky function completely.

Though i don't know why but when i add this option magellan's stickyness stops working.

Also i have to mention i'm using an 3rd Party js plugin "slick.js" which is btw. recommended by Foundation since Orbit is deprecated.

//edit
i have to add: i now added "overflow-x:hidden" just to html{} not like before html,body {} and this was it works fine!

cheers