Foundation Magellan（マゼラン）

訳注：機能的には scrollspy に同じです。

Magellan の作成方法

次のマークアップは、基本的な magellan を作成します：

例

<div data-magellan-expedition="fixed">
<dl class="sub-nav">
    <dd data-magellan-arrival="page1"><a href="#page1">Page 1</a></dd>
    <dd data-magellan-arrival="page2"><a href="#page2">Page 2</a></dd>
</dl>
</div>

<h3 data-magellan-destination="page1">Page1</h3>
<a name="page1"></a>
...

<h3 data-magellan-destination="page2">Page2</h3>
<a name="page2"></a>
...


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

Try it Yourself »

例の説明

Magellan を作成するには、 <div> 要素に data-magellan-expedition="fixed" 属性を追加します。

次に、<dd> または <li> 要素に data-magellan-arrival="value" 属性を追加し、その後に、同じ値（page1）を持つリンクが続くようにします。

Magellan の行先の制御は、data-magellan-destination="value" 属性とその後の name="value" 属性を持つ <a> を使用します。両方の値（page1）ともに、動作するためには data-magellan-arrival の値と一致しなければなりません。

最後に、Foundation JS を初期化します。これで、ユーザがページをスクロールしたときに、ナビゲーションリスト内のリンクが自動的に更新されるようになります。

Magellan トップバー

トップバーでの Magellan 使用：

例

<div data-magellan-expedition="fixed">
<nav class="top-bar" data-topbar>
    ...

    <section class="top-bar-section">
      <ul class="left">
        <li data-magellan-arrival="page1"><a href="#page1">Page 1</a></li>
        <li data-magellan-arrival="page2"><a href="#page2">Page 2</a></li>
      </ul>
    </section>

</nav>
</div>

<h3 data-magellan-destination="page1">Page1</h3>
<a name="page1"></a>
...

<h3 data-magellan-destination="page2">Page2</h3>
<a name="page2"></a>
...

結果：

Try it Yourself »

Magellan パディング

デフォルトで、magellan <div> は 10px のパディングを持っています。これを削除するには、CSS を使用します：

例

[data-magellan-expedition], [data-magellan-expedition-clone] {
padding: 0;
}

Try it Yourself »

Magellan オプション

Magellan のデフォルト設定を変更するには、<div data-magellan-expedition="fixed" data-options="destination_threshold:60"> のように data-options を使用します：

名称	タイプ	デフォルト	説明	Try it
active_class	string	active	magellan バーのアクティブなリンクに使用するクラスを指定する	Try it
threshold	number	0	magellan バーが固定位置に留まる必要があるときに指定する。 number は、スクロールが magellan div に達したときから計算される。0 = 自動	Try it
destination_threshold	number	20	ナビゲーション・リスト内のリンクがアクティブになる（青色の背景色）ときのため、上からのピクセル数を指定する	Try it
fixed_top	number	0	magellan バーが、トップからどれくらい離れてなければならないかをピクセルで指定する	Try it
throttle_delay	number	50	レームレートを高めるために絞り（throttling：訳不明）を計算する
offset_by_height	boolean	true	次の文章を訳せない（Specifies whether to offset the destination by the expedition height. Usually you want this to be true, unless your expedition is on the side.）

« 前章へ

次章へ »