グリッドレイアウトフレームワークでの固定位置の使用

Question

ウェブページを作成しています。左側のメニューは固定されています（ページを上下にスクロールすると、あなたの後に移動します）。私は現在、グリッドレイアウトを使用しています：Foundation（zurbによる）http://foundation.zurb.com/docs/grid.php。 12列のグリッドを使用します。私は、固定レイアウトの配置と同時にグリッドの使用に問題があります。ページ上でグリッドレイアウトと固定要素を使用するにはどうすればよいですか？

<div class="container"> 
    <div class="row"> 
     <div class="four columns relativePosition"> 
       <div class="fixedPosition"> 
        <div class="four columns"> 
         Menu Here 
        </div> 
       </div> 
     </div> 
     <div class="eight columns"> 
       Other Content 
     </div> 
    </div> 
</div> 

私は、この構造を使用して動作するように固定された位置を取得することができたが、いくつかのケースでは、メニューの内容が大きすぎると8列の内容と重複し成長します。私はこれを行うより良い方法があるかどうかわかりません？

Answer 1

この記事は - ZURB + ScrollSpyで見つかりました。それは5分で働いた。私は、スクロールバーdivのサイドバーコンテンツをグリッド位置の下にラップすることがわかりました。

Answer 2

とにかく固定されたページの構成要素を持っているとすれば、最も簡単なことは、「Foundation」グリッドからdivを完全に外してしまうことです。グリッド外では、fixedという位置に配置することができ、グリッドとはまったくやりとりしません。メニュー自体もフレキシブルなグリッドにする必要がある場合は、メイングリッドから分離してください。

Answer 3

このような問題を解決するためにjavascriptを使用することは、過度のようです。私はFoundationのオフセットクラスを使って基礎を守ります：

<div class="row twelve columns"> 
    <div class="two columns" style="position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;"> 
    Menu 
    <ul><li>Menu Item</li></ul> 
    </div> 
    <div class="ten columns offset-by-two"> 
    Content goes here 
    </div> 
</div> 

希望します！