jQueryを利用したスクロールにあわせて伸縮するメニューの作り方

jQueryのイベントを活用すると比較的簡単に導入可能。

[adsense]

スクロールによって起きるアニメーションを設計

やりたいこと。

幅広にとったヘッダーメニューエリアを、下へスクロールすると縮み、

指定した最小の幅で止まるようにし、また上へとスクロールすると元に戻る。

実際にコードを書いてみる

// JavaScript Document
var sh = $(document);
var maxh = 150;//デフォルトの高さ。
var minh = 50;//一番細いとき。
var borh = 100;
var nh = 0;

var sizeh = 20;
var mint = 15;
var nt = 0;

$(window).scroll(function () {
if(sh.scrollTop() < borh) {
//伸び縮みの処理
nh = maxh - sh.scrollTop();
$("#head").height(nh);
nt = Math.round((nh - sizeh)/2);
$("#header").css("top",nt);
} else {
//細いまま保つ
$("#head").height(minh);
$("#header").css("top",mint);
}
});