スクロールしていった途中からナビゲーションなどの位置を固定する

2014年10月29日jQueryのみでつくるギミック

以前「Sticky-Kit」という今回紹介するギミックと同じようなが出来るjQueryプラグインを紹介しましたが、今回紹介するのはjQueryとCSSで行う方法です。

こちらの方法の場合はレスポンシブWebデザインを行う際、画面が狭くなってナビゲーションを固定をすることで画面領域を圧迫したくない時も、CSS側で簡単にfixedをstaticに切り替えたりすることが可能です。

JavaScript

(function($){
	$(function() {
		var nav = $('#nav'),
		offset = nav.offset();
		$(window).scroll(function () {
			if($(window).scrollTop() > offset.top - 20) {
				nav.addClass('fixed');
			} else {
				nav.removeClass('fixed');
 			}
		});
	});
})(jQuery);

HTML

<div id="container">
	<div id="contents">
		<div class="section">section</div>
		<div class="section">section</div>
		<div class="section">section</div>
	</div>
	<div id="side">
		<div id="nav">nav</div>
	</div>
</div>

CSS

#container {
	width: 1000px;
	margin: 0 auto;
	overflow: hidden;
}
#contents {
	width: 740px;
	float: left;
}
#contents .section {
	height: 1000px;
	margin-top: 20px;
	padding: 10px;
	background-color: #ffffff;
}
#side {
	margin: 20px 20px 0 0;
	float: right;
}
#nav {
	width: 200px;
	height: 200px;
	color: #ffffff;
	background-color: #ff5b6b;
	padding: 10px;
}
.fixed {
	position: fixed;
	top: 20px;
}
@media screen and (max-width: 480px)  {
	.fixed {
		position: static;
	}
}