1

我正在运行基础 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-->

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

4

1 回答 1

0

在文档left: auto !important上，已为该.fixed课程设置了 a。即使应用它，您的问题仍然与：固定位置但相对于容器（和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;
    }
于 2015-05-03T14:57:51.583 回答