長文注意。
【レスポンシブ対応の要望】
最近のWebサイトは、PC、スマホなどの異なる環境に対応するために
レスポンシブ対応をしているケースが多いですね。
現在作成中のサイトも、画面をスクロールしても、
メニュー部分がスクロールするようにフローティングメニューを実装したいという
要望がありました。
この記事では、
常に画面の最上部に、各種メニューを表示し、かつ
下記の条件を満たす場合どうすれば良いかを考えます。
条件１：スクロールしてもついてきて、いつも画面最上部に表示される。
条件２：他の表示パーツ（本文やフッター、ウィジェットなど）の閲覧に
支障をきたさない。（重ならない）
条件３：レスポンシブ対応のため、ブラウザのサイズに応じて
メニューも含めた表示パーツの幅、高さが変化する。
【トップに配置するパーツを固定すると考える】
・今回の場合、「常にブラウザ上の表示領域のトップに、メニューバーが表示される」
状態を再現したい。この場合、メニューとして表示したいモノを
画面のトップ位置に固定する。といった所に落ち着きます。
つまり、CSSで幅や高さなどを指定しているところに
position : fixed;
などと記述し、絶対的な位置を場所に指定します。
加えて、他のパーツと重なった時に上側に表示されるように
メニュー z-index : 100;
本文 z-index : 1;
などのように、指定します。
これだけならば単純なのですが・・・
珍事発生
【メニューだけ固定したら本文が上のめりになった？！】
これでいつでも表示領域のトップ部分にメニューが表示される…のですが、
メニューの下の位置に表示していた、本文の部分がメニュー領域に食い込んで
しまいました（汗
これでは、どんなにがんばっても本文の上のほうが、
メニューに隠れてしまい表示されません。
これでもよいケースもあるかもしれませんが、本文に相当する箇所に
入力フォームなどの、隠れたら困るものがあると大問題です。
ならば…
【メニューの高さだけ、本文の表示位置を下にずらせばよい】
こういう考えに至りました。
仮に、メニュー部分の高さをX（px）とした場合本文部分のCSSを
margin-top : Xpx;
などと書いてあげれば、うまくいくはず。
ここでまた問題が。
メニューのサイズは可変です。高さ変わります
ドラえもーん どうしよう！！！
はい jQuery !
メニュー部分のサイズが変わる可能性があるアクション
（読み込み時、ブラウザ操作時など）発生時に、
高さを変える処理を行えばよいわけです。
ブラッシュアップ予定。