jquery - HTMLで、スクロール時に1つの固定テーブル列が別のテーブル列と重なるのを修正する方法は?

Question

jQuery で追加したときの HTML テーブル列のレイアウトに関して問題があります。テーブルには 2 つの列があります。左側はメニュー用で、右側はコンテンツを変更する iframe です。

やりたいことはjQueryを使ってコンテンツ欄を縦スクロールしてもメニュー欄の位置を固定したいです。このjQueryコードを使用してこれを成功させました。

jQuery(function($) {

    var nav    = $('#main_menu'),
        offset = nav.offset();

    $(window).scroll(function () {
      if($(window).scrollTop() > offset.top - 50) {
        nav.addClass('fixed');
      } else {
        nav.removeClass('fixed');
      }
    });

}); 

ただし、コンテンツ列はメニュー列と重なっています。したがって、コンテンツ列はメニュー列の下に完全に収まります。コンテンツ列をメニュー列の横にも固定しますが、スクロール可能にしたいです。

ただし、これはブラウザ画面がページより小さい場合にのみ発生します。以下はjsFiddleコードです。この Mozilla Firefox を表示していますが、ページは IE 7 以降と互換性があるはずです。

http://jsfiddle.net/Aym72/7/

結果を下にスクロールしてから、水平方向に右にスクロールします。あなたが私を助けてくれることを願っています。