[解決済み] テーブルのヘッダーをjQueryで固定し、ユーザーがスクロールして見えなくなったときにも固定されるようにする。

質問

HTMLのテーブルをデザインしようとしているのですが、ユーザーがヘッダーをスクロールして見えなくなったときでも、ヘッダーがページの一番上にあるようにしたいのですが、可能でしょうか？ 例えば、テーブルがページから500ピクセル下にある場合、ユーザーがヘッダーをスクロールして視界から外しても（ブラウザがウィンドウズビューでなくなったことを検知して）、トップに表示されたままにするにはどうすればよいでしょうか？ どなたか、Javascriptで解決できる方法を教えてください。

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>
</table>

つまり、上記の例では <thead> が表示されなくなった場合、ページと一緒にスクロールするようにします。

重要：私は NOT を使用した解決策を探しています。 <tbody> にはスクロールバー（overflow:auto）が表示されます。

解決方法は？

を叩いて、このようなことをするのでしょう。 scroll イベントハンドラ window を使用し、別の table を固定位置で表示し、ページ上部にヘッダーを表示します。

HTMLです。

<table id="header-fixed"></table>

CSSです。

#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}

JavaScriptです。

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

これは、ユーザーが元のテーブルヘッドを隠すのに十分なほど下にスクロールしたときに、テーブルヘッドを表示します。 また、ユーザーがページを十分に上方にスクロールしたときに再び隠れます。

動作例 http://jsfiddle.net/andrewwhitaker/fj8wM/