粘性导航(Sticky Navigation)

优质
小牛编辑
134浏览
2023-12-01

描述 (Description)

可以在magellan中包含Sticky插件以创建恒定的导航标题。 以下示例适用于旧版本的Foundation。

例子 (Example)

以下示例演示了在基金会中使用magellan粘性导航 -

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