Magellan

JavaScript

Magellan 讓您建立導覽，追蹤使用者所在頁面的作用中區段。搭配我們的 Sticky 外掛程式，建立固定的導覽元素。

設定

您可以將 Magellan 用於任何導覽元素，例如我們的選單或您自己的自訂元件。只要將屬性 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>

您可以將 Magellan 與我們的 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 時，Magellan 的作用中區段會透過將雜湊與作用中 Magellan 區段 ID 加入瀏覽器網址，記錄下來。預設情況下，Magellan 會取代瀏覽器記錄（使用 history.replaceState()）。

使用屬性 data-update-history="true" 修改此行為以附加到瀏覽器記錄 (使用 history.pushState())。在後一種情況下，瀏覽器的返回按鈕將追蹤 Magellan 經過的每個區段 (在大部分情況下，不建議這樣做)。

JavaScript 參考

初始化

要使用此外掛程式，必須在 JavaScript 中包含下列檔案

foundation.core.js
foundation.magellan.js
- 包含實用程式函式庫 foundation.smoothScroll.js
- 包含實用程式函式庫 foundation.util.triggers.js

Foundation.Magellan

建立 Magellan 的新執行個體。

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

觸發這些事件： Magellan#event:init

名稱	類型	說明
`element`	物件	要新增觸發器的 jQuery 物件。
`options`	物件	覆寫預設的外掛程式設定。

外掛程式選項

使用這些選項自訂 Magellan 的執行個體。外掛程式選項可以設定為個別資料屬性、一個合併的 data-options 屬性，或傳遞給外掛程式建構函式的物件。深入了解 JavaScript 外掛程式如何初始化。

名稱	類型	預設值	說明
`data-animation-duration`	`數字`	`500`	動畫捲動在不同位置之間應花費的時間 (毫秒)。
`data-animation-easing`	`字串`	`linear`	在不同位置之間捲動時要使用的動畫樣式。可以是 `'swing'` 或 `'linear'`。
`data-threshold`	`數字`	`50`	用作位置變更標記的像素數。
`data-active-class`	`字串`	`is-active`	套用於 Magellan 容器中活動位置連結的類別。
`data-deep-linking`	`布林值`	`false`	允許腳本操作目前頁面的 URL，如果支援的話，則變更記錄。
`data-update-history`	`布林值`	`false`	如果啟用深度連結，則使用活動連結更新瀏覽器記錄。
`data-offset`	`數字`	`0`	如果使用固定導覽列，則在項目按一下時用來抵銷頁面捲動的像素數。

事件

這些事件會從附加 Magellan 外掛程式的任何元素觸發。

名稱	說明
`update.zf.magellan`	當 magellan 完成更新至新的活動元素時觸發。

方法

calcPoints

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

計算一組畫素值，這些值是頁面上各個位置之間的分界線。如果新增新元素或位置大小變更時，可以呼叫。

scrollToLoc

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

函式，用於捲動到頁面上指定的位置。

名稱	類型	說明
`loc`	字串	格式正確的 jQuery id 選擇器。範例：'#foo'

reflow

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

呼叫必要的函式，以在 DOM 變更時更新 Magellan

_destroy

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

銷毀 Magellan 的一個執行個體，並重設視窗的網址。

設定

Sticky 導覽