Foundation - Magellan Sticky Navigation

Description

Sticky plugin can be included with magellan to create a constant navigation header. The following example works well on the older version of Foundation.

Example

The following example demonstrates the use of magellan sticky navigation in Foundation −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
   </head>

   <body>
      <div data-magellan-expedition = "fixed">
         <section class = "top-bar-section">
            <div class = "sticky-mag">
               <ul class = "horizontal menu" data-magellan>
                  <li data-magellan-arrival = "home"><a href = "#home">Home</a></li>
                  <li data-magellan-arrival = "about"><a href = "#about">About</a></li>
                  <li data-magellan-arrival = "service"><a href = "#service">Service</a></li>
               </ul>
            </div>
         </section>
      </div>
      <br/>
      <br/>

      <h2>Example of Magellan Sticky Navigation</h2>
      <h3 data-magellan-destination = "home">Home</h3>
      <a name = "home"></a>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and
         scrambled it to make a type specimen book.
      </p>
      
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and
         scrambled it to make a type specimen book.
      </p>

      <h3 data-magellan-destination = "about">About</h3>
      <a name = "about"></a>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and
         scrambled it to make a type specimen book.
      </p>
      
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and
         scrambled it to make a type specimen book.
      </p>

      <h3 data-magellan-destination = "service">Service</h3>
      <a name = "service"></a>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and
         scrambled it to make a type specimen book.
      </p>
      
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and
         scrambled it to make a type specimen book.
      </p>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code magellan_sticky_navigation.html file.
Open this HTML file in a browser, an output is displayed as shown below.

foundation_navigation.htm