縦や横に長いページの場合、スクロールしてもヘッダーやサイドメニューの位置は固定しておきたい場合があります。ちょうどExcelの「ウィンドウ枠の固定」を設定した状態の事です。普通のWebサイトで横にスクロールするようなケースは無いかもしれないですが、ちょっとそういうページを作る機会があり調べたのでエントリーしておきます。
固定ヘッダーを作りたい場合は、「position:fixed」で実現できます。横にも長いページがある場合、position:fixedで固定してしまうと、画面から横にはみ出た部分が一生表示されません。position:fixed は画面内の絶対位置を指定するスタイルなので、スクロールするという概念が無いのです。
つまり、縦にも横にも長いページのヘッダーを作りたい場合、
「縦にスクロールした場合は固定したいが、横にはスクロールできる」事が必要なのです。
で、調べたあげく、これを実現するjQueryのプラグインが存在しました。
かなりニッチなプラグインですが、こういうマニアックなものは嫌いではないです。
gpFloat
前置きが長くなりましたが、言葉で説明すると長くなりますので、
デモページを作っておきましたのでご参考下さい。
DEMO
固定したい要素は普通にposition:fixedで固定しておいて、
下記のように記述しておくと横だけスクロール可能です。
このようなHTMLがあったとして、「header」を縦だけ固定したいとします。
<div id="wrapper"> <div id="header"></div> <div id="main"> <div id="sidemenu"></div> <div id="content"></div> </div> </div>
headerは position:fixed を指定。
#wrapper { position: relative; }
#header { position: fixed; }
後はこのように記述するだけです。
<script>
$('#header').gpFloatX();
$('#sidemenu').gpFloatY();
</script>
