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

<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

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-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.




Building Blocks Using Magellan


Want more? Check out all the hot Building Blocks ⇨

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

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