麦哲伦不会坚持基础 5 网格

Question

我正在运行foundation 5并使用magellan，尽我所能，它始终脱离网格。我是新手，任何见解都会有所帮助。当我第一次加载页面时，它在网格中的位置是正确的。当我向下滚动时，麦哲伦菜单会跳到左边，并填充页面的整个宽度。我再次向上滚动，它没有改变（意味着它仍然一直向左），即使它从浏览器窗口的顶部"解锁"了自己。我目前只在本地主机测试服务器上有它。我在firefox和chrome上看到了同样的问题。

这是我的代码：

<div class="row">
 <div class="large-10" column>
  <div data-magellan-expedition="fixed">
   <dl class="sub-nav">
    <dd data-magellan-arrival="arrival">
     <a href="#arrival">Arrival</a>
    </dd>
    <dd data-magellan-arrival="destination">
     <a href="#destination">Destination</a>
    </dd>
   </dl>
  </div>
 </div>
 <div class="large-2" column>nothing</div>
  <div class="large-10" column>
   <a name="arrival"></a>
   <span data-magellan-destination="arrival">Arrival</span>
   <a name="destination"></a>
   <span data-magellan-destination="destination">DEstination</span>
  </div>
 <div class="large-2" column>nothing</div>
</div>  <!--closes div class row-->

如果有任何见解，我将不胜感激。我已经用这个把自己逼疯太久了。这一定是可能的-在docs页面上，麦哲伦似乎正确地停留在网格的中间一列：http://foundation.zurb.com/docs/components/magellan.html

Answer 1

在文档中，为.fixed类设置了left: auto !important。即使在应用它的时候，你的问题仍然与：固定位置，但相对于容器（和位置固定宽度100%）。

一个可能的解决方案（或可能有帮助的东西）将使用以下CSS用于大网格：

.fixed {
    background-color:transparent;
    position: fixed;
    left: 50%;
    top: 0%;
    transform: translateX(calc(-41.66% + 30px));
}      
    .fixed .sub-nav {
        background-color:white;
        margin-right: calc(41.66% + 30px);
        padding: 15px;
    }