adds sticky magellan example to docs page

diff --git a/docs/assets/js/docs.examples.js b/docs/assets/js/docs.examples.js
index f12ee71654e491ba4b6eb14c6cac2514da16fd9a..7469a32e72e2e83b612ad71f64fe7b65fca93ca8 100644 (file)
--- a/docs/assets/js/docs.examples.js
+++ b/docs/assets/js/docs.examples.js
@@ -19,5 +19,11 @@ $('.docs-transitions').change(function() {
     $transitionDemo.show();
   });
 });
+var stickyMag = $('#sticky-magellan');
+stickyMag.on('sticky.zf.stuckto:top', function(){
+  stickyMag.find('nav').addClass('stuck-mag');
+}).on('sticky.zf.unstuckfrom:top', function(e){
+  stickyMag.find('nav').removeClass('stuck-mag');
+});
 
 }();

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index ed0573da006339b34a583e8578d594f1ad00aded..779e4a6fb513deb00537c89d8d3eb4a7549372a5 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -31,6 +31,12 @@
   ul:first-child { float: left; }
   ul:last-child  { float: right; }
 }
+.sticky-mag {
+  &.stuck-mag {
+    background-color: white;
+    border-bottom: 2px solid #121212;
+  }
+}
 
 // .docs-component {
 //   .callout {

diff --git a/docs/pages/magellan.md b/docs/pages/magellan.md
index 74726141434281a5082201e671ed30f2e2b47add..0512a27ec14333c8f9ba130b7eda8dc26bf6519a 100644 (file)
--- a/docs/pages/magellan.md
+++ b/docs/pages/magellan.md
@@ -5,15 +5,17 @@ js: js/foundation.magellan.js
 tags:
   - navigation
 ---
-
-<nav data-magellan>
-  <ul class="horizontal menu">
-    <li><a href="#setup">Setup</a></li>
-    <li><a href="#sticky-navigation">Sticky Navigation</a></li>
-    <li><a href="#sass-reference">Sass Reference</a></li>
-    <li><a href="#javascript-reference">JavaScript Reference</a></li>
-  </ul>
-</nav>
+<div data-sticky-container>
+  <div class="sticky" id="sticky-magellan" style="width:100%;" data-sticky data-margin-top="0" data-margin-bottom="0" data-top-anchor="setup" data-btm-anchor="destroy:bottom">
+    <nav data-magellan class="sticky-mag">
+      <ul class="horizontal menu expanded">
+        <li><a href="#setup">Setup</a></li>
+        <li><a href="#sticky-navigation">Sticky Navigation</a></li>
+        <li><a href="#javascript-reference">JavaScript Reference</a></li>
+      </ul>
+    </nav>
+  </div>
+</div>
 
 ## Setup
 
@@ -34,14 +36,30 @@ You can use Magellan with any navigation element, like our [Menu](menu.html) or
 
 ## Sticky Navigation
 
-You can use Magellan with our Sticky plugin to create a persistent navigation header or sidebar.
+You can use Magellan with our Sticky plugin to create a persistent navigation header or sidebar. The first example is a simplified version of the table of contents on the right side of this page, the second is the menu bar floating at the top of the page.
 
 ```html
-<div data-sticky="header">
-  <ul class="horizontal menu" data-magellan>
-    <li><a href="#first">First Arrival</a></li>
-    <li><a href="#second">Second Arrival</a></li>
-    <li><a href="#third">Third Arrival</a></li>
-  </ul>
+<div class="large-3 columns" data-sticky-container>
+  <nav class="columns" data-sticky data-anchor="exampleId" data-sticky-on="large">
+    <ul class="vertical menu" data-magellan>
+      <li><a href="#first">First Arrival</a></li>
+      <li><a href="#second">Second Arrival</a></li>
+      <li><a href="#third">Third Arrival</a></li>
+    </ul>
+  </nav>
+</div>
+
+
+
+<div data-sticky-container>
+  <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-top-anchor="topAnchorExample" data-btm-anchor="bottomOfContentId:bottom">
+    <nav data-magellan>
+      <ul class="horizontal menu expanded">
+      <li><a href="#first">First Arrival</a></li>
+      <li><a href="#second">Second Arrival</a></li>
+      <li><a href="#third">Third Arrival</a></li>
+      </ul>
+    </nav>
+  </div>
 </div>
 ```