一歩先を行く　QHMユーザのためのTips

スクロールしても追従するメニュー (改良版)

　スクロールしても追従するメニューを作成しましたが、ちょっと気に入らない仕様だったので、改良版を作成してみました。この方法は、北研のQHM Proのサイトと同じような動きをします。
　通常、画面をスクロールすると、メニューも一緒にスクロールしますが、メニューだけ常に表示する方法です。下までスクロールしてフッターが表示されると、フッターがすべて表示されるまでスクロールしますが、そのときメニューは固定しているのではなく、上にスクロールし自然な感じで見やすくしてくれます。文章での説明は難しいので、画面サイズを小さくして実際の画面で確認してください。
２カラムと３カラムの両方に対応しています。CSSとjQueryを使用します。
３カラムの場合、どちらか長い方のメニューに合わせてスクロールします。
どのデザインを使用してもOKのはずです。４つのデザインでは確認済み。
以下のサイトを参考にさせてもらいました。
Cyokodog :: Diary　http://d.hatena.ne.jp/cyokodog/20120427/exflexfixed01

【作成手順】

1. 以下のURLを開く（参考にしたサイト）
   http://d.hatena.ne.jp/cyokodog/20120427/exflexfixed01
2. 画面下部にある　ダウンロード　から　jquery.ex-flex-fixed.zip　をダウンロードする
3. ファイルを解凍し、以下のファイルをFTPで QHMの js フォルダにアップする。
   jquery-1.7.1.min.js
   jquery.exflexfixed-0.2.0.js
4. 以下のスクリプトをメニューナビ２にコピペする。
   たったこれだけです。CSSはこのスクリプト内に記述してあります。

【解説】

• ｊQueryの　Ex Flex Fixed を使用してメニューを必要に応じて固定位置に表示します。
• QHMの メニュー１、メニュー２、コンテンツの各IDに対し表示位置を操作します。

【コード】

#beforescript{{
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.exflexfixed-0.2.0.js"></script>
<script>
jQuery(function(){
  $('#sidebar,#sidebar2').exFlexFixed({
    container : '#main',
  });
});
</script>

<style type="text/css">
/* clearfixでwrapperに高さを出す */
#main,
div.contents-wrapper{
  /zoom : 1;
}
#main:after{
  content : '';
  display : block;
  clear : both;
}
/* メニュー１(左メニュー） */
#wrap_sidebar{
  position : relative;
  z-index:1;
}
/* メニュー２（右メニュー） */
#wrap_sidebar2{
  position : relative;
  z-index:1;
}
</style>
}}