Foundation 麦哲伦（Magellan）导航详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 麦哲伦（Magellan） 讲得明明白白！这是 Foundation 6+ 中的一个轻量级页面内导航组件，用于长页面（如单页应用、文档页、落地页）的锚点跳转和滚动跟踪：
- 点击导航链接 → 平滑滚动到对应锚点
- 页面滚动时 → 自动高亮当前可见区域的导航项
- 常结合 Sticky 插件做固定（sticky）导航栏，滚动时始终可见
超级适合 FAQ、产品详情、教程页等长内容页面！
1. 基本结构（Foundation 6+ 标准写法）
<!-- 导航容器 -->
<ul class="menu" data-magellan>
<li><a href="#section1">部分 1</a></li>
<li><a href="#section2">部分 2</a></li>
<li><a href="#section3">部分 3</a></li>
</ul>
<!-- 页面内容锚点 -->
<section id="section1" data-magellan-target="section1">
<h3>部分 1：内容标题</h3>
<p>大量内容...</p>
</section>
<section id="section2" data-magellan-target="section2">
<h3>部分 2：内容标题</h3>
<p>大量内容...</p>
</section>2. 固定（Sticky）导航（最实用，推荐！）
结合 Sticky 插件，让导航滚动时固定在顶部：
<div data-sticky-container>
<div class="sticky" data-sticky data-margin-top="0">
<ul class="horizontal menu" data-magellan>
<li><a href="#intro">简介</a></li>
<li><a href="#features">特性</a></li>
<li><a href="#pricing">价格</a></li>
</ul>
</div>
</div>3. 高级选项
data-bar-offset="50"：滚动偏移量（避开固定顶部栏）data-deep-link="true"：支持 URL 哈希深链接（分享链接自动定位）data-animation-duration="500"：平滑滚动动画时间
4. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
<style>
section { min-height: 800px; padding: 50px; background: #f9f9f9; margin: 20px 0; }
.sticky { background: #1779ba; }
.menu a { color: white; }
</style>
</head>
<body>
<div data-sticky-container>
<div class="sticky" data-sticky data-margin-top="0">
<ul class="horizontal menu expanded text-center" data-magellan data-bar-offset="50">
<li><a href="#intro">简介</a></li>
<li><a href="#features">特性</a></li>
<li><a href="#pricing">价格</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</div>
</div>
<section id="intro" data-magellan-target="intro">
<h2>简介部分</h2>
<p>滚动页面试试，导航会自动高亮当前部分！</p>
</section>
<section id="features" data-magellan-target="features">
<h2>特性部分</h2>
<p>大量内容...</p>
</section>
<section id="pricing" data-magellan-target="pricing">
<h2>价格部分</h2>
<p>更多内容...</p>
</section>
<section id="contact" data-magellan-target="contact">
<h2>联系部分</h2>
<p>底部内容...</p>
</section>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>下面给你看真实效果（官方文档和项目中最标准的 Foundation Magellan 示例）：
官方文档（最新版）：https://get.foundation/sites/docs/magellan.html
你现在想干嘛？
→ 明天继续讲 Foundation 表格（Table）还是模态框（Reveal/Modal）？
→ 帮我做一个带图标 + 深链接的 Magellan 导航？
→ 给我一个垂直侧边 Magellan（用于文档页）？
直接回复下一句：
“明天讲 table”
“帮我做带图标 Magellan”
“给我垂直文档导航”
我立刻给你写好！
