元素上添加data-magellan-expedition"fixed"属性。
在每个需要导航的地方（如或
）上添加data-magellan-arrival"value"属性，后面添加与该属性值相同的链接（如page1）。
使用data-magellan-destination"value"属性来控制导航目标的位置，在紧跟这个目标的元素上添加name"value"属性。
最后，初始化Foundation JS，当用户滚动页面时，导航将会根据当前显示的内容自动切换。
使用Magellan导航头部工具条
Magellan导航可以和头部工具条结合使用，实现更灵活的导航效果。使用头部工具条的方法如下：
lt;div data-magellan-expedition"fixed"gt;
lt;nav class"top-bar" data-topbargt;
lt;section class"top-bar-section"gt;
lt;ul class"left"gt;
lt;li data-magellan-arrival"page1"gt;lt;a href"#page1"gt;Page 1lt;/agt;lt;/ligt;
lt;li data-magellan-arrival"page2"gt;lt;a href"#page2"gt;Page 2lt;/agt;lt;/ligt;
lt;/ulgt;
lt;/sectiongt;
lt;/navgt;
lt;/divgt;
在上面的代码中，我们将Magellan导航和Foundation的头部工具条结合起来。只需按照上述步骤创建Magellan导航，并将导航项添加到头部工具条的
中即可。
修改Magellan导航的内边距
默认情况下，Magellan导航的
元素有10px的内边距。如果需要移除这个内边距，可以使用以下CSS代码：
[data-magellan-expedition], [data-magellan-expedition-clone] {
padding: 0;
}
通过以上CSS代码，可以将Magellan导航的内边距设为0。
使用data-options属性修改Magellan导航设置
通过使用data-options属性，可以修改Magellan导航的一些设置。例如：
lt;div data-magellan-expedition"fixed" data-options"destination_threshold:60"gt;...
在上述代码中，我们使用data-options属性来设置destination_threshold的值为60。这个值用于控制滚动到目标位置前的偏移量。
如果本经验对你有所帮助，请给予我们点赞并投上宝贵的一票。感谢您的支持！
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
