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/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', '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.

Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »