jqueryを使ったフローティングメニューの作り方【簡易版】

2013年09月07日

カテゴリー：: javascript

先日時間がない中で、「ワァーーーッ」ってなりながら使ったフローティングメニューのコードなんですが、忘れないようにメモ残しときます。

HTMLやCSSはサンプルで、実際のお仕事で使ったコードではないのですが、
以下、CSS

<style type="text/css">
#wrapper {
	width: 100%;
	text-align: center;
}

#content {
	margin: 0 auto;
	width: 980px;
	text-align: left;
}

#main {
	width: 660px;
	height: 1200px;
	text-align: center;
	background: #eeeeee;
	float: right;
}

#side {
	width: 300px;
	height: 360px;
	color: #ffffff;
	text-align: center;
	background: #990000;
	float: left;
}

#footer {
	margin: 0 auto;
	width: 980px;
	height: 360px;
	color: #ffffff;
	background: #333333;
	clear: both;
}
</style>

#wrapper {

width: 100%;

text-align: center;

}

#content {

margin: 0 auto;

width: 980px;

text-align: left;

}

#main {

width: 660px;

height: 1200px;

text-align: center;

background: #eeeeee;

float: right;

}

#side {

width: 300px;

height: 360px;

color: #ffffff;

text-align: center;

background: #990000;

float: left;

}

#footer {

margin: 0 auto;

width: 980px;

height: 360px;

color: #ffffff;

background: #333333;

clear: both;

}

</style>

以下、HTML

<div id="wrapper">
	<div id="content">
		<div id="main">
			フローティングメニューのです。
		</div>
		<div id="side">
			サイドコンテンツです。
		</div>
	</div>
	<div id="footer">
		フッターです。
	</div>
</div>

フローティングメニューのです。

</div>

サイドコンテンツです。

</div>

フッターです。

</div>

で、jqueryが読み込まれていることが前提なのですが、以下javascriptのコードです。

$(function(){
	// フローティングメニュー用処理
	var floating = $("#side");
	var offset = floating.offset();
	var limit_pos = $("body").height() - ( $("#footer").height() + floating.height() ); // フッター崩れ防止

	$(window).scroll(function() {
		if(limit_pos < $(window).scrollTop()) {
			return false;
		}

		if ($(window).scrollTop() > offset.top) {
			floating.stop().animate({
				marginTop: $(window).scrollTop() - offset.top
			});
		} else {
			floating.stop().animate({
				marginTop: 0
			});
		};
	});
});