さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】スクロールして指定要素が画面上部にきたら固定する

Pocket
LINEで送る

画面スクロールして指定要素が画面上部にきたら固定(fixed)する方法です。

javascript

$(function(){
	var gNavi = $(".naviArea");
	var boxTop = gNavi.offset().top;

	$(window).scroll(function () {
		if($(window).scrollTop() >= boxTop) {
			gNavi.addClass("fixed");
			$("body").css("margin-top","79px");
		} else {
			gNavi.removeClass("fixed");
			$("body").css("margin-top","0px");
		}
	});
});

※クラス「fixed」にはdisplay:fixed;が指定されているものとする。

カテゴリー:JQuery, スクロール

コメントを残す

コメント内容