サイドメニューなどを一定の範囲でのみ position:fixed させる jQuery Ex Flex Fixed

更新履歴

2012-04-27

Ver 0.2.0
再実装し、もろもろ痒いとこを解消しました。詳しくは下記エントリをどうぞ。
一定範囲で position:fixed させる Ex Flex Fixed がかゆいとこだらけだったので作り直しました

2012-02-09

Ver 0.1.3.1
Firefox の場合、watchPosition パラメータ が true でスクロール状態で画面更新すると固定位置がずれる不具合を修正しました。
IE の場合、水平方向非固定処理が有効にならないケースがある不具合を修正しました。

2011-12-31

Ver 0.1.3
固定表示する要素の位置が変化するケースにも対応しました。Demo

2011-11-05

Ver 0.1.2
IEで、固定表示する要素のmarginがautoの場合、正しく処理されない不具合を修正しました

2011-10-06

Ver 0.1.1
スクロール開始時に対象要素の表示位置が1pxずれる不具合を修正しました。
スクロールされた状態で、画面をリロードすると対象要素の表示位置がずれる不具合を修正しました。

サイドメニューの固定表示に position:fixed を適用するというケースがあると思いますが、表示位置が常に固定される故に、スクロール時にメニューがフッターに被らないようデザインしたり、ウィンドウの表示枠に収まるメニュー数に調整したりと、デザイン上の配慮がいろいろ必要になったりします。
jQuery Ex Flex Fixed を使用するとこういった事を極力気にせず、position:fixed を適用することができます。（IE6 には対応してません・・面倒だったので・・）

使い方

jquery.js、jquery.exflexfixed.js を読み込みます。

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../jquery.exflexfixed.js"></script>

以下のようなレイアウトで、サイドメニューを固定する場合、

<div class="header">header</div>
<div class="body">
	<div class="sub-contents">
		<ul class="sidemenu">
			<li>link</li>
			<li>link</li>
			<li>link</li>
		</ul>
	</div>
	<div class="main-contents">
		main
	</div>
</div>
<div class="footer">footer</div>

サイドメニュー要素である ul.sidemenu に対し、exFlexFixed() メソッドを適用し、container パラメータに、fixed を有効にする範囲となる div.body 要素を指定します。

jQuery(function($){
	$('ul.sidemenu').exFlexFixed({
		container : 'div.body'
	});
});

Demo

特徴

ヘッダー領域の活用

通常の position:fixed では以下のように、垂直方向にスクロールした際、ヘッダーのあった領域にスペースができてしまいます。

Ex Flex Fixed を適用すると、スクロール時にヘッダー領域のスペースがある状態では、position:fixed が適用されないので、スペースを無駄にしません。

Demo

フッター領域に被らない

通常の position:fixed では、垂直方向のスクロールをしてくと以下のように position:fixed 要素がフッター領域に被ってしまいます。

Ex Flex Fixed を適用するとフッター領域に被る直前で position:fixed の適用が解除され、フッターに被りません。

Demo

ウィンドウ高さを超えるメニュー数でも表示可能

メニュー数が多く、ウィンドウの表示領域以上の高さがある状態でスクロールした場合、最下段のメニューが表示されるまで position:fixed が適用されません。

Demo

水平方向スクロールでは固定されない

水平方向にスクロールした場合は position:fixed は適用されないので、メニューがコンテンツに被ることはありません。

Demo

コンテンツ領域からの相対位置での固定表示

marign:0 auto などでコンテンツをセンタリング表示してるデザインでは、ウィンドウをリサイズするとコンテンツの X 座標が変化しますが、コンテンツの相対位置で固定表示されるので、ウィンドウをリサイズしても表示位置がずれません。

Demo

fixed させておきたい範囲を指定可能

fixed させておきたい範囲の高さを持つ親又は先祖要素を container パラメータにて指定します。

Demo

jQuery Ex DropDown との併用

Ex DropDown（リスト要素をドロップダウンメニューに変換する jQuery プラグインを作ってみた - Cyokodog::Diary）と併用するには、以下のように記述します。

jQuery(function($){
	$('ul.sidemenu').exDropDown().exFlexFixed({
		container : 'div.body'
	});
});

Demo

固定表示要素の位置が変化する場合の対応

例えば、上方に配置された要素のサイズが変化し、固定表示要素の位置が変化するような場合は、以下のような記述で固定表示位置を補正できます。

jQuery(function($){
	$('ul.sidemenu').exDropDown().exFlexFixed({
		watchPosition : true,
		container : 'div.body'
	});
});

Demo

watchPosition には ms 単位の数値を指定することもできます。この場合は指定の数値間隔で表示位置の変化を検出します。true を指定した場合は、300ms で監視します。

ダウンロード

こちらからどうぞ

• jquery.ex-flex-fixed - GitHub
• jquery.ex-flex-fixed.zip