HTMLでヘッダーの固定

Question

HTMLでヘッダーを固定しているのですが、
theadより上の部分を非表示にして
theadより下の部分を表示するにはどうすればよいのでしょうか？？

リンク
ブラウザのスクロールで動くようにしたいです。

Comments

[Lhankor_Mhy]

『HTMLでヘッダーを固定』がよく分かりませんでした。こういうことですか？→http://defghi1977-onblog.blogspot.jp/2012/02/blog-post_7109.html

[TaruOrder]

解答ありがとうございます！
いま悩んでいるところのリンクを張りました。
テーブルにスクロールバーをつけるのではなくて、
ブラウザのスクロールを利用してヘッダーが動いているようにみせるということがしたいです。

Answer 1

リンク先のjs部分、これに置き換えて下さい。
つまりはこういうことではないかと。

            $(function () {
				var scT;
				var tableTop = $('.table1').get(0).offsetTop;
				var theadH = $('#sHead2').height();
				var wrapPaddingTop = parseInt($('.table1').parent().css('padding-top').replace('px','')); 
                //ブラウザスクロールがされたときに処理が走る
                $(window).on('load scroll', function () {
					scT = $( window ).scrollTop();
					if(scT>tableTop){
						$('.table1').parent().css({ paddingTop: wrapPaddingTop+theadH})
						$('#sHead2').css({position:'fixed', top:0});
					} else {
						$('.table1').parent().css({paddingTop:wrapPaddingTop})
						$('#sHead2').css({position:'static'});
					}
                });
            });

Answer 2

http://jsfiddle.net/nyCKE/2/
こんな感じでしょうか?

http://stackoverflow.com/questions/8321849/how-to-scroll-tables-tbody-independent-of-thead
こちらで紹介されていました。