CMS（WordPress）などの技術ブログ

縦や横に長いページの場合、スクロールしてもヘッダーやサイドメニューの位置は固定しておきたい場合があります。ちょうど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>

#wrapper { position: relative; }

#header { position: fixed; }

<script>

$('#header').gpFloatX();

$('#sidemenu').gpFloatY();

</script>