スクロール追従メニュー

スクロールしても追従するメニュー

このスクロールしても追従するメニューの改良版がこちらにあります。
こちらをお勧めします。
http://qhmtips.com/qhm_m08/index.php?3_greenblue01


 QHMユーザフォーラムで、メニューを追従させたいという希望がありましたので作成してみました。この方法は、北研のQHM Proのサイトの方法とは異なります。
 通常、画面をスクロールすると、メニューも一緒にスクロールしますが、メニューだけ指定した位置に戻ってくる方法です。CSSとjQueryを使用します。

【作成手順】

  1. jquery.dimensions.jp をダウンロードする。本家のjQueryが工事中だったので、こちらからダウンロードしました。 http://www.bvbcode.com/jp/18tfu06o-1286048
  2. ダウンロードしたものをQHMの js フォルダ内にFTPで転送する。
  3. 以下のスクリプトをメニューにコピペする。
  4. デザインに合うように、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

認証コード(6740)

当ページは役に立ちましたか?

選択肢 投票
たいへん役に立った 2  
ちょっとだけ役に立った 0  
普通 0  
あんまり 0  

powered by QHM 6.0.9 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional