Magellan
Magellan is a style-agnostic plugin that lets you give your site sticky navigation. This fixed-position navigation helps users keep track of where they are on a page without scrolling.
Arrival
You can create the fixed navigation structure for Magellan using minimal markup.
HTML
<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>Destination
You can create the destination structure for Magellan using minimal markup.
HTML
<a name="arrival"></a>
<h3 data-magellan-destination="arrival">Arrival</h3>
<a name="destination"></a>
<h3 data-magellan-destination="destination">Destination</h3>Configure with JS
It's easy to configure Magellan using our provided JavaScript. You can use with data-attributes or plain old JavaScript. Make sure jquery.js, foundation.js, and foundation.magellan.js have been included on your page before continuing. For example, add the following before the closing <body> tag:
HTML
<script src="js/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>Basic
Using data-attributes is the preferred method of making changes to our JavaScript.
HTML
<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>Advanced
You can adjust lots of settings. For example:
JS
{
// specify the class used for active sections
active_class: 'active',
// how many pixels until the magellan bar sticks, 0 = auto
threshold: 0
}