Foundation
Magellan
Magellan is a style agnostic plugin that lets you style a sticky navigation that denotes where you are on the page.
Build With Predefined HTML Structure
When we set out to build Magellan, we wanted it to be really lightweight and stay out of your way. With that in mind, we kept custom styles out of the game. Magellan is style agnostic, meaning you can attach it to anything. There are a few built-in lists in Foundation that will work, including the sub-nav. If you look at the top of this page you'll see our sub-nav. As you scroll, you'll see Magellan in action!
<div data-magellan-expedition="fixed">
<dl class="sub-nav">
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
<dd data-magellan-arrival="js"><a href="#js">Arrival 2</a></dd>
</dl>
</div>
<div data-magellan-expedition="fixed">
<ul class="sub-nav">
<li data-magellan-arrival="build"><a href="#build">Build with HTML</a></li>
<li data-magellan-arrival="js"><a href="#js">Arrival 2</a></li>
</ul>
</div>
For these styles to come across, make sure you have the default Foundation CSS package or that you've selected magellan from a custom package. These should be linked up following our default HTML page structure.
Using Our JavaScript
foundation.js are available on your page. You can refer to the javascript documentation on setting that up.
Just add foundation.magellan.js AFTER the foundation.js file. Your markup should look something like this:
<body>
...
<script>
document.write('<script src=/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
</body>
Required Foundation Library: foundation.magellan.js
Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:
<h3 data-magellan-destination="js">Using Our Javascript</h3>
<div data-magellan-expedition="fixed">
<ul class="sub-nav">
<li data-magellan-arrival="build"><a href="#build">Build with HTML</a></li>
<li data-magellan-arrival="js"><a href="#js">Arrival 2</a></li>
</ul>
</div>
Optional JavaScript Configuration
Magellan options can only be passed in during initialization at this time.
{
// specify the class used for active sections
activeClass: 'active',
// how many pixels until the magellan bar sticks, 0 = auto
threshold: 0
}