横スクロール対策（未）

http://koikikukan.com/archives/2012/03/27-015555.php

HTML

<script>
jQuery(function() {
    jQuery('#box').persistentHeaders();
});
</script>

<div id="page-wrap">

    <h1>Persistent Headers サンプル</h1>

    <section class="some-other-area persist-area">
        <h2 class="persist-header">コンテンツヘッダー</h2>
        <p>ねずみは鳥の病気たばこ会を窓を出しセロたまし。するといきなり残念ませましというかっこうございない。大丈夫でしますんますこそたこうして野ねずみの気の毒げのときではどうか残念ましなて、何だけ晩を吸っれのたです。

出すぎおまえも先生を悪いなてたくさんの嵐のつけ屋がこわ第一ゴーシュ家のあんばいをあけてしまったな。ねずみも遠くこめてくれだ。譜は六弾い音のようを弾きてやるです。

二つしか舌楽長やみんなとこさえよていだら。扉もあとにいきなりにとりておしまいが眼のようになってボーでまわしておいおいゴムに飛びだしてやろだ。何とかとうとうつぶをゴーシュからなっますない。わたしなかなかにゴーシュをこさえよて扉が弾いなまし。トォテテテテテイへ考えでた。

「次にした。セロ、みんなから勢。つかまえ。」これは前のままのますます一生のときが進みございた。水も扉でまっ棒に押し出してあたりをセロが睡ってのそのそ今過ぎれたときをしますだ。

そんなに病気あわせて、済んてだしてっましてゴーシュでではしんをどんと拍したう。「首尾いる。

音楽からしで。</p>
    </section>

    <table class="persist-area">
        <thead>
          <tr class="persist-header"><th>ヘッダー</th><th>ヘッダー</th></tr>
        </thead>
        <tbody>
          <tr><td>データ1</td><td>データ1</td></tr>
          <tr><td>データ2</td><td>データ2</td></tr>
          <tr><td>データ3</td><td>データ3</td></tr>
          <tr><td>データ4</td><td>データ4</td></tr>
          <tr><td>データ5</td><td>データ5</td></tr>
          <tr><td>データ6</td><td>データ6</td></tr>
          <tr><td>データ7</td><td>データ7</td></tr>
          <tr><td>データ8</td><td>データ8</td></tr>
          <tr><td>データ9</td><td>データ9</td></tr>
          <tr><td>データ10</td><td>データ10</td></tr>
        </tbody>
    </table>

    <section class="some-other-area persist-area">
        <h2 class="persist-header">コンテンツヘッダー</h2>
        <p>ねずみは鳥の病気たばこ会を窓を出しセロたまし。するといきなり残念ませましというかっこうございない。大丈夫でしますんますこそたこうして野ねずみの気の毒げのときではどうか残念ましなて、何だけ晩を吸っれのたです。

出すぎおまえも先生を悪いなてたくさんの嵐のつけ屋がこわ第一ゴーシュ家のあんばいをあけてしまったな。ねずみも遠くこめてくれだ。譜は六弾い音のようを弾きてやるです。

二つしか舌楽長やみんなとこさえよていだら。扉もあとにいきなりにとりておしまいが眼のようになってボーでまわしておいおいゴムに飛びだしてやろだ。何とかとうとうつぶをゴーシュからなっますない。わたしなかなかにゴーシュをこさえよて扉が弾いなまし。トォテテテテテイへ考えでた。

「次にした。セロ、みんなから勢。つかまえ。」これは前のままのますます一生のときが進みございた。水も扉でまっ棒に押し出してあたりをセロが睡ってのそのそ今過ぎれたときをしますだ。

そんなに病気あわせて、済んてだしてっましてゴーシュでではしんをどんと拍したう。「首尾いる。

音楽からしで。</p>
    </section>
</div>

CSS

.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
}


* { margin: 0; padding: 0; }
body { font: 13px Vernafa, sans-serif; min-width: 660px; }
h1 {
  font: 26px Vernafa, sans-serif;
  margin-top: 50px;
}
p { margin: 0 0 20px 0; }
#page-wrap { width: 500px; margin: 0px auto; }
table { border-collapse: collapse; }
th {
  background-color: lightgrey;
  padding: 10px; 
  width: 250px; 
  text-align: left;
}
tr:nth-child(odd) { background: #eee; }
td { padding: 10px; width: 250px; }

.some-other-area { margin: 100px 0 200px; line-height: 2; }
h2 {
  background: lightgrey;
  padding: 10px;
  font: 28px Vernafa, sans-serif;
  margin: 0 0 20px 0;
}

JavaScript

/**
 * jquery.persistentheaders.js
 * Release 0.0.1 (Mar 27, 2012)
 * http://css-tricks.com/examples/PersistantHeaders/
 */

(function($){
    $.fn.persistentHeaders = function(options) {
        var defaults = {
            areaName: 'persist-area',
            headerName: 'persist-header',
            slideUpSpeed: 0,
            slideDownSpeed: 0
        };
        
        var setting = jQuery.extend(defaults, options),
            clonedHeaderRow;

        $(".persist-area").each(function() {
            clonedHeaderRow = jQuery(".persist-header", this);
            clonedHeaderRow
                .before(clonedHeaderRow.clone())
                .css("width", clonedHeaderRow.width())
                .addClass("floatingHeader");
        });

        $(window)
            .scroll(function () {
                $(".persist-area").each(function() {
                    var el             = $(this),
                        offset         = el.offset(),
                        scrollTop      = $(window).scrollTop(),
                        floatingHeader = $(".floatingHeader", this)
                    if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
                        floatingHeader.slideDown(setting.slideDownSpeed);
                        floatingHeader.css({
                            "visibility": "visible"
                        });
                    } else if ((scrollTop > offset.top)) {
                        floatingHeader.slideUp(setting.slideUpSpeed);
                    } else {
                        floatingHeader.css({
                            "visibility": "hidden"
                        });
                    };
                })
            }).trigger("scroll");
        return this;
    };
})(jQuery)