Foundation 麦哲伦（Magellan）导航
Foundation 麦哲伦（Magellan）导航技术文档
导航模块概述
Foundation 麦哲伦（Magellan）导航模块是从Foundation框架中分离出来的一个单独的JavaScript模块。该模块提供了一组API方法，可以实现页面内部的导航识别与响应。
安装
Magellan模块可以通过npm包管理工具或者手动下载使用。如果你是使用npm，可以通过以下命令进行安装：
npm install foundation-sites --save
安装完成后，你需要在你的HTML文档中引入Magellan模块的JavaScript文件：
<script src="/path/to/foundation.magellan.js"></script>
使用
在你的HTML文档中，需要有一个导航列表，它将包含你所需要的所有导航。可以通过css class设置导航列表样式：
<ul data-magellan>
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
</ul>
在导航列表中的每个链接(< a >)，设置链接指向特定区域。例如，在上例中，我们将创建3个分段，每个分段应该拥有独一无二的id值：
<div id="section-1">
<h2>Section 1</h2>
<p>Section 1 content goes here...</p>
</div>
<div id="section-2">
<h2>Section 2</h2>
<p>Section 2 content goes here...</p>
</div>
<div id="section-3">
<h2>Section 3</h2>
<p>Section 3 content goes here...</p>
</div>
现在，Magellan模块已经准备就绪，我们可以在必要时激活它：
$(document).foundation();
API
以下是Magellan提供的一些API方法：
Interchange({options})
设置Magellan的基本选项：
activeClass: {string} 设置当前活动的导航链接的css类(class)名称，默认为’active’。threshold: {number} 控制导航链接何时开始激活，单位为像素，默认为0。
$(document).foundation({
magellan: {
activeClass: 'is-active',
threshold: 100
}
});
setThreshold(threshold)
改变Magellan的激活阈值：
var magellan = new Foundation.Magellan($('#magellan'));
magellan.setThreshold(300);
setThresholdByBottom(offset)
设置用于比较Magellan激活阈值的底部偏移值，与激活链接的文档顶部之间的距离。offset参数是像素数。
var magellan = new Foundation.Magellan($('#magellan'));
magellan.setThresholdByBottom(300);
scrollToLoc(location)
滚动到指定位置：
var magellan = new Foundation.Magellan($('#magellan'));
magellan.scrollToLoc('#section-1');
destroy()
从Magellan组件中卸载Magellan对象：
var magellan = new Foundation.Magellan($('#magellan'));
magellan.destroy();