1

ファンデーション 5 を実行し、マゼランを使用しています。一貫してグリッドから抜け出すことができるように試してみてください。私はこれに慣れていないので、どんな洞察も役に立ちます。ページを最初にロードすると、グリッド内に正しく配置されます。下にスクロールすると、マゼラン メニューが左に移動し、ページの幅いっぱいに表示されます。もう一度上にスクロールすると、ブラウザ ウィンドウの上部から「はがれ」ても、変化しません (つまり、左端までずっと残っていることを意味します)。現在、ローカルホストのテストサーバーにしかありません。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

ドキュメントでは、クラスに aleft: auto !importantが設定されています。.fixedそれを適用しても、問題はまだ関連しています：固定位置ですが、コンテナに対して相対的です（および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 に答える