スクロールしてグローバルナビを上部固定

viva

検索するといろんなやり方が出てきます。

多いのが slideDown を使う方法。
詳しくは調べていませんが、毎度のように slideDown が実行されていることに疑問を抱きつつ、表示スタイルがあまり好きではない。
height:0px → height:50px のアニメーションの様な表示になっている。

希望としては height:50px が上からスライドしてくるスタイルが良かったので、下記のようにしてみた。

$(function(){
	var box = $("#gnavi");
	var boxTop = box.offset().top + 50;
	var flag = false;
	$(window).scroll(function () {
		if($(window).scrollTop() >= boxTop && !flag) {
			box.addClass("fixed");
			box.css("top", "-50px").animate({top: "0px"}, 800);
			flag = true;
		} else if ($(window).scrollTop() <= boxTop && flag) {
			box.removeClass("fixed");
			flag = false;
		}
	});
});

適当に書いたのでコードが汚いと思いますが･･･。
とりあえず、イメージしたスタイルで表示されるようになりました。
簡単に説明すると、
#gnavi がスクロールによって表示されないところまで移動した時点で下記の fixed クラスを追加

box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
position: fixed;
left: 0px
z-index: 9999;

top: -50px; にて、ウィンドウ枠の見えないところへ待機させ、アニメーションで top: 0px; までスライドさせる。
flag でスクロール毎に実行されないようフラグを立てる。
※offsetに +50 しているのは、アニメーションさせる位置の微調節です。

jQueryプラグインの jquery.easing を使うと、より面白いアニメーション表示が出来ると思われます。

アニメーションの種類が分かりやすく見れるサイト
http://james.padolsey.com/demos/jquery/easing/

追記：コチラにアニメーション等確認できる物を作っておきました。

viva

More Posts