スクロール追従メニュー
スクロールしても追従するメニュー
このスクロールしても追従するメニューの改良版がこちらにあります。
こちらをお勧めします。
http://qhmtips.com/qhm_m08/index.php?3_greenblue01
QHMユーザフォーラムで、メニューを追従させたいという希望がありましたので作成してみました。この方法は、北研のQHM Proのサイトの方法とは異なります。
通常、画面をスクロールすると、メニューも一緒にスクロールしますが、メニューだけ指定した位置に戻ってくる方法です。CSSとjQueryを使用します。
【作成手順】
- jquery.dimensions.jp をダウンロードする。本家のjQueryが工事中だったので、こちらからダウンロードしました。 http://www.bvbcode.com/jp/18tfu06o-1286048
- ダウンロードしたものをQHMの js フォルダ内にFTPで転送する。
- 以下のスクリプトをメニューにコピペする。
- デザインに合うように、CSSの値を変更する。
【解説】
- var name = "#menubar"; で指定したIDに対し、追従処理を行う。これを変更することで、メニュー以外を追従させることも可能。
- duration:900 の値を変更するとアニメーションに変化が。
#beforescript{{ <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.dimensions.js"></script> <script type="text/javascript"> var name = "#menubar"; var menuYloc = null; $(document).ready(function(){ menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) $(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+"px"; $(name).animate({top:offset},{duration:900,queue:false}); }); }); </script> }} #beforescript{{ <style type="text/css"> #menubar{ position: absolute; top: 234px; left: auto; width: 200px; } </style> }}
【欠点】
ヘッダの高さが大きいデザインのときは、メニューの上にヘッダ分の空白ができるため、少しかっこ悪い。
ご意見箱
皆様のご意見をお待ちします。
- 大変素晴らしい!ですね。他にもアイデアがいっぱい!ブックマークさせていただきました。 -- ひこぼー 2012-09-04 (火) 06:22:03
- すごい!さすがtomozoさん。jqueryあるんですね。 -- jun 2012-09-04 (火) 20:37:47
- ひこぼーさん ありがとうございます。まだまだ、これからTipsを増やしていく予定です。 -- tomzo 2012-09-04 (火) 23:52:08
- junさん いつもお世話になります。今回も素敵なテンプレートをいただきました。ありがとうございます。 -- tomzo 2012-09-04 (火) 23:53:36