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

【问题标题】：magellan won't adhere to foundation 5 grid麦哲伦不会坚持基础 5 网格
【发布时间】：2015-04-06 04:54:46
【问题描述】：

我正在运行基础 5 并使用 magellan，并尽我所能尝试它不断突破网格。我是新手，任何见解都会有所帮助。当我第一次加载页面时，它在网格内正确定位。当我向下滚动时，magellan 菜单会跳到左边并填满页面的整个宽度。我再次向上滚动，它并没有改变（意味着它仍然一直向左），即使它从浏览器窗口的顶部“脱离”了自己。我目前只在我的本地主机测试服务器上拥有它。我在 windows 的 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-->

我真的很感激任何见解。我已经让自己发疯了太久了。这一定是可能的 - 在文档页面上，magellan 似乎正确地停留在网格的中间列：http://foundation.zurb.com/docs/components/magellan.html

【问题讨论】：

标签： zurb-foundation-5 magellan

【解决方案1】：

在文档中为 .fixed 类设置了 left: auto !important。即使应用它，您的问题仍然与：Fixed position but relative to container（和Position Fixed width 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;
    }

【讨论】：