麦哲伦

JavaScript

麦哲伦允许您创建导航，以跟踪用户所在的页面的活动部分。将其与我们的 Sticky 插件配对以创建固定的导航元素。

设置

您可以将麦哲伦与任何导航元素一起使用，例如我们的菜单或您自己的自定义组件。只需将 data-magellan 属性添加到容器中，并将链接添加到页面的特定部分。每个部分都需要一个唯一的 ID。

<!-- Add a Menu -->
<ul class="menu expanded" 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>

<!-- Add content where magellan will be linked -->
<div class="sections">
  <section id="first" data-magellan-target="first">First Section</section>
  <section id="second" data-magellan-target="second">Second Section</section>
  <section id="third" data-magellan-target="third">Third Section</section>
</div>

您可以将麦哲伦与我们的 Sticky 插件一起使用，以创建持久的导航标题或侧边栏。

<!-- Add a Sticky Menu -->
<div data-sticky-container>
  <div class="top-bar" data-sticky data-margin-top="0" id="example-menu">
    <div class="top-bar-left">
      <ul class="menu">
        <li class="menu-text">Site Title</li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu" data-magellan>
        <li><a href="#first">One</a></li>
        <li><a href="#second">Two</a></li>
        <li><a href="#third">Three</a></li>
      </ul>
    </div>
  </div>
</div>

<!-- Add content where magellan will be linked -->
<div class="sections">
  <section id="first" data-magellan-target="first">First Section</section>
  <section id="second" data-magellan-target="second">Second Section</section>
  <section id="third" data-magellan-target="third">Third Section</section>
</div>

下面的示例是本页右侧目录的简化版本。

<div class="cell large-3">
  <nav class="sticky-container" data-sticky-container>
    <div class="sticky" 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>
    </div>
  </nav>
</div>

浏览器历史记录

当 data-deep-link 选项设置为 true 时，麦哲伦的活动部分将通过向浏览器 URL 添加带有活动麦哲伦部分 ID 的哈希值来记录。默认情况下，麦哲伦会替换浏览器历史记录（使用 history.replaceState()）。

通过使用属性 data-update-history="true" 来修改此行为，以追加到浏览器历史记录（使用 history.pushState()）。在后一种情况下，浏览器的后退按钮将跟踪麦哲伦经过的每个部分（在大多数情况下，不建议这样做）。

JavaScript 参考

初始化

以下文件必须包含在您的 JavaScript 中才能使用此插件

foundation.core.js
foundation.magellan.js
- 使用实用程序库 foundation.smoothScroll.js
- 使用实用程序库 foundation.util.triggers.js

Foundation.Magellan

创建一个新的麦哲伦实例。

var elem = new Foundation.Magellan(element, options);

触发以下事件： Magellan#event:init

名称	类型	描述
`元素`	对象	要添加触发器的 jQuery 对象。
`选项`	对象	覆盖默认插件设置。

插件选项

使用这些选项来自定义麦哲伦的实例。插件选项可以设置为单个数据属性、一个组合的 data-options 属性或作为传递给插件构造函数的对象。了解有关如何初始化 JavaScript 插件的更多信息。

名称	类型	默认	描述
`data-animation-duration`	`数字`	`500`	动画滚动在位置之间应花费的时间（以毫秒为单位）。
`data-animation-easing`	`字符串`	`线性`	在位置之间滚动时使用的动画样式。可以是 `'swing'` 或 `'linear'`。
`data-threshold`	`数字`	`50`	用作位置变化标记的像素数。
`data-active-class`	`字符串`	`is-active`	应用于麦哲伦容器上的活动位置链接的类。
`data-deep-linking`	`布尔值`	`假`	允许脚本操作当前页面的 url，如果支持，则更改历史记录。
`data-update-history`	`布尔值`	`假`	如果启用深度链接，请使用活动链接更新浏览器历史记录。
`data-offset`	`数字`	`0`	如果使用粘性导航栏，则在项目单击时偏移页面滚动的像素数。

活动

这些事件将从附加了麦哲伦插件的任何元素中触发。

名称	描述
`update.zf.magellan`	当麦哲伦完成更新到新的活动元素时触发。

方法

calcPoints

$('#element').foundation('calcPoints');

计算一个像素值数组，这些像素值是页面上位置之间的分界线。如果添加了新元素或位置的大小发生变化，则可以调用。

scrollToLoc

$('#element').foundation('scrollToLoc', loc);

滚动到页面上给定位置的函数。

名称	类型	描述
`loc`	字符串	格式正确的 jQuery id 选择器。示例：'#foo'

回流

$('#element').foundation('reflow');

调用必要的函数以在 DOM 更改时更新麦哲伦

_destroy

$('#element').foundation('_destroy');

销毁麦哲伦的实例并重置窗口的 url。

设置

粘性导航