最初に開いたときは、ページの中頃にグローバルメニューがあるのに、
ページを下にスクロールしていくと、途中からメニューがついてくるサイトありますね。

(ちょっとキャプチャをつくるのが面倒なので、ひとまず割愛)



最初から位置を固定させるプロパティがcssにはあって、

position:fixed;
left:20px;
top:20px;

などでやりますが、スクロールすると途中からついてくるという動きも
jqueryを使うと、簡単にできます。

jqueryの記述はこちら

<script>
$(function(){
offset = $('#gmenu').offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
$("#gmenu").css({"position":"fixed","top":"0px"});
} else {
$("#gmenu").css("position","static");
}
});
});
</script>

HTMLはこうなってます。

<div id="gmenu">
<ul>
<li><a href="#"><img src="img/common/menu1.jpg" alt="トップ" /></a></li>
<li><a href="#"><img src="img/common/menu2.jpg" alt="会社概要" /></a></li>
<li><a href="#"><img src="img/common/menu3.jpg" alt="サービス" /></a></li>
<li><a href="#"><img src="img/common/menu4.jpg" alt="こだわり" /></a></li>
<li><a href="#"><img src="img/common/menu5.jpg" alt="お問い合わせ" /></a></li>
</ul>
</div>


ここであらたに覚えないといけないのは、2つです。

offset()

これと

$(window).scroll(function () {
ホニャララ
});

この2つだ。


offset()は、ページの一番左上から見てどこにいるのかを数字で返してくれる。

$('#gmenu').offset(); だったら、

<div id="gmenu">が、そのページの一番左上からみて、横に何px、縦に何pxのとこにいますよ、と
数字を返してくれる。

offset = $('#gmenu').offset();

だから、offsetという名前の変数に、その何pxと何pxという数字を入れました、と。

この数字を取り出すには、2通りあって、

offset.top で、上から何px?という数字が出てくるし、
offset.left で、左から何px?という数字が出てくる。


次、

$(window).scroll(function () {
ホニャララ
});

これ。

これは、もう英語の構文みたいに、そのまま覚えちゃったほうがいいですな。

画面がスクロールするたびに、ホニャララを実行しますよ、ってやつ。

僕がマウスのスクロールホイールに触って、コリッ・・ってやっただけで
ホニャララが発動するんだ。

繊細なやつですよ。


ついでにもういっこあった

$(window).scrollTop()

これは、見れば予想がつくけど、そのページの上からどれくらいスクロールしたかの数字がわかる。

ホイールをコリっ・・・で50pxぐらい画面が動いたら、ここに入ってくる数字は50になるってわけ。


あとはもうわかりやすいっすね。

<script>
$(function(){
offset = $('#gmenu').offset();  
$(window).scroll(function () { 
if($(window).scrollTop() > offset.top) {
$("#gmenu").css({"position":"fixed","top":"0px"}); 
} else { 
$("#gmenu").css("position","static"); 
}
});
});
</script>

①offsetっていう名前をつけた変数に、#gmenuの現在の位置(ページの左上からみてどのへんにいるか)を入れときますよ。
②コリっとスクロールした瞬間発動させるよ。(次以降のやつらを)
③もし、今スクロールしてる量が、offsetの上からの距離、つまりは#gmenuの上からの距離を上回ったら・・
④#gmenuのcssをposition:fixedにして、top:0pxに張り付けちまえ!
⑤ち、ちがったら?
⑥そんときは、#gmenuのpositionは普通のやつstaticに戻しときゃいいよ。



という一連の流れ。
スクロールが発生するたびに③〜⑥をいちいち考えてるってことですね。


アディオス!