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

{ // specify the class used for active sections active_class: 'active', // how many pixels until the magellan bar sticks, 0 = auto threshold: 0, // pixels from the top of destination for it to be considered active destination_threshold: 20, // calculation throttling to increase framerate throttle_delay: 50, // top distance in pixels assigned to the fixed element on scroll fixed_top: 0 }

Sass Errors?

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

SCSS

@import "foundation/components/magellan";
Stay on top of what’s happening in responsive design.

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