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

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>

<h3 data-magellan-destination="arrival">Arrival</h3>
<a name="arrival"></a>


<h3 data-magellan-destination="destination">Destination</h3>
<a name="destination"></a>

Configure with JS

HTML

  <script src="js/vendor/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

$(document).foundation({
"magellan-expedition": {
  active_class: 'active', // specify the class used for active sections
  threshold: 0, // how many pixels until the magellan bar sticks, 0 = auto
  destination_threshold: 20, // pixels from the top of destination for it to be considered active
  throttle_delay: 50, // calculation throttling to increase framerate
  fixed_top: 0, // top distance in pixels assigend to the fixed element on scroll
  offset_by_height: true // whether to offset the destination by the expedition height. Usually you want this to be true, unless your expedition is on the side.
}
});

Adding New Content After Page Load

If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:

$(document).foundation();

Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.

$(document).foundation('magellan-expedition', 'reflow');

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/magellan";

Accessibility

This component is not yet accessible. Stay tuned for updates in future releases.