Foundation 麦哲伦（Magellan）导航详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把麦哲伦（Magellan）讲得明明白白！这是 Foundation 6+ 中的一个轻量级页面内导航组件，用于长页面（如单页应用、文档页、落地页）的锚点跳转和滚动跟踪：
- 点击导航链接 → 平滑滚动到对应锚点
- 页面滚动时 → 自动高亮当前可见区域的导航项
- 常结合Sticky插件做固定（sticky）导航栏，滚动时始终可见
超级适合 FAQ、产品详情、教程页等长内容页面！
1. 基本结构（Foundation 6+ 标准写法）
<!-- 导航容器 --><ulclass="menu"data-magellan><li><ahref="#section1">部分 1</a></li><li><ahref="#section2">部分 2</a></li><li><ahref="#section3">部分 3</a></li></ul><!-- 页面内容锚点 --><sectionid="section1"data-magellan-target="section1"><h3>部分 1：内容标题</h3><p>大量内容...</p></section><sectionid="section2"data-magellan-target="section2"><h3>部分 2：内容标题</h3><p>大量内容...</p></section>2. 固定（Sticky）导航（最实用，推荐！）
结合 Sticky 插件，让导航滚动时固定在顶部：
<divdata-sticky-container><divclass="sticky"data-stickydata-margin-top="0"><ulclass="horizontal menu"data-magellan><li><ahref="#intro">简介</a></li><li><ahref="#features">特性</a></li><li><ahref="#pricing">价格</a></li></ul></div></div>3. 高级选项
data-bar-offset="50"：滚动偏移量（避开固定顶部栏）data-deep-link="true"：支持 URL 哈希深链接（分享链接自动定位）data-animation-duration="500"：平滑滚动动画时间
4. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="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><divdata-sticky-container><divclass="sticky"data-stickydata-margin-top="0"><ulclass="horizontal menu expanded text-center"data-magellandata-bar-offset="50"><li><ahref="#intro">简介</a></li><li><ahref="#features">特性</a></li><li><ahref="#pricing">价格</a></li><li><ahref="#contact">联系</a></li></ul></div></div><sectionid="intro"data-magellan-target="intro"><h2>简介部分</h2><p>滚动页面试试，导航会自动高亮当前部分！</p></section><sectionid="features"data-magellan-target="features"><h2>特性部分</h2><p>大量内容...</p></section><sectionid="pricing"data-magellan-target="pricing"><h2>价格部分</h2><p>更多内容...</p></section><sectionid="contact"data-magellan-target="contact"><h2>联系部分</h2><p>底部内容...</p></section><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="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”
“给我垂直文档导航”
我立刻给你写好！
