September 04, 2011
サイドメニューなどを一定の範囲でのみ 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' }); });
特徴
ヘッダー領域の活用
通常の position:fixed では以下のように、垂直方向にスクロールした際、ヘッダーのあった領域にスペースができてしまいます。
Ex Flex Fixed を適用すると、スクロール時にヘッダー領域のスペースがある状態では、position:fixed が適用されないので、スペースを無駄にしません。
フッター領域に被らない
通常の position:fixed では、垂直方向のスクロールをしてくと以下のように position:fixed 要素がフッター領域に被ってしまいます。
Ex Flex Fixed を適用するとフッター領域に被る直前で position:fixed の適用が解除され、フッターに被りません。
ウィンドウ高さを超えるメニュー数でも表示可能
メニュー数が多く、ウィンドウの表示領域以上の高さがある状態でスクロールした場合、最下段のメニューが表示されるまで position:fixed が適用されません。
水平方向スクロールでは固定されない
水平方向にスクロールした場合は position:fixed は適用されないので、メニューがコンテンツに被ることはありません。
コンテンツ領域からの相対位置での固定表示
marign:0 auto などでコンテンツをセンタリング表示してるデザインでは、ウィンドウをリサイズするとコンテンツの X 座標が変化しますが、コンテンツの相対位置で固定表示されるので、ウィンドウをリサイズしても表示位置がずれません。
fixed させておきたい範囲を指定可能
fixed させておきたい範囲の高さを持つ親又は先祖要素を container パラメータにて指定します。
jQuery Ex DropDown との併用
Ex DropDown(リスト要素をドロップダウンメニューに変換する jQuery プラグインを作ってみた - Cyokodog::Diary)と併用するには、以下のように記述します。
jQuery(function($){ $('ul.sidemenu').exDropDown().exFlexFixed({ container : 'div.body' }); });
固定表示要素の位置が変化する場合の対応
例えば、上方に配置された要素のサイズが変化し、固定表示要素の位置が変化するような場合は、以下のような記述で固定表示位置を補正できます。
jQuery(function($){ $('ul.sidemenu').exDropDown().exFlexFixed({ watchPosition : true, container : 'div.body' }); });
watchPosition には ms 単位の数値を指定することもできます。この場合は指定の数値間隔で表示位置の変化を検出します。true を指定した場合は、300ms で監視します。
ダウンロード
こちらからどうぞ
- 4226 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CCoQFjAA&url=http://d.hatena.ne.jp/cyokodog/20081214/jQueryPositionSize&ei=qCcZT4S0A-qYmQX40vGTCg&usg=AFQjCNFvRu-7mRjxHRBXCZhUfNNLKh0Vjg
- 2315 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&ved=0CDsQFjAB&url=http://d.hatena.ne.jp/cyokodog/20090316/jQueryExDate&ei=jvwYT_zrMYmciAfoz6juCw&usg=AFQjCNH48zA2WL-OYyMYDeDVUFWO24dYiQ
- 2180 https://www.google.co.jp/
- 1329 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&ved=0CDgQFjAC&url=http://d.hatena.ne.jp/cyokodog/20090129/jQueryAbsolutePos01&ei=ZFkiT8L3HYrzrQeltfS0CA&usg=AFQjCNFE1WFnaCUUA1UuC4QH2c_ugfwvtA&sig2=NK6hirlcscNiLX6Rs10nww
- 996 http://www.google.co.jp/url?sa=t&rct=j&q=jquery ウィンドウ サイズ&source=web&cd=1&ved=0CCQQFjAA&url=http://d.hatena.ne.jp/cyokodog/20090112/jQueryPositionSize03&ei=pwGEToKAJOrqm
- 969 http://www.google.co.jp/url?sa=t&rct=j&q=jquery スクロール終了&source=web&cd=2&ved=0CCkQFjAB&url=http://d.hatena.ne.jp/cyokodog/20090928/jqueryexscrollevent01&ei=vSOETue9OaGOmQX7ooQm&usg=AFQjC
- 904 http://www.google.co.jp/url?sa=t&rct=j&q=jquery 位置 取得&source=web&cd=2&sqi=2&ved=0CDEQFjAB&url=http://d.hatena.ne.jp/cyokodog/20090112/jQueryPositionSize03&ei=JAyETuKNL5CRiQfErPCxDw&usg=AFQjCNFeUBw2BzoIcWyl9P
- 834 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=4&ved=0CD0QFjAD&url=http://d.hatena.ne.jp/cyokodog/20110125/exaltertdialogs01&ei=X78fT6elJq_GmQW42dXMDg&usg=AFQjCNFdgY0TNzr6gSkWv385o4Ph8lxB-w
- 687 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&frm=1&source=web&cd=2&ved=0CDMQFjAB&url=http://d.hatena.ne.jp/cyokodog/20100530/exfitframe01&ei=MCwiT4HzHsqiiAfUuP3zBA&usg=AFQjCNF-UIPUHRkYT0xWrGB8I5S-zhSt-A
- 663 http://www.google.co.jp/url?sa=t&rct=j&q=jquery 画面リサイズイベント&source=web&cd=3&ved=0CC8QFjAC&url=http://d.hatena.ne.jp/cyokodog/20101101/exresize01&ei=1RiETpeWCqqemQ






