コード

デフォルトではページの中部や下部などに配置されている要素が、ページを下スクロールさせていくことにより、ウィンドウ上部に到達。それをトリガーにして上部にそのまま固定させる方法をご紹介。以下サンプルでは、サイドバーの「fixed-box」がスクロールにより上部到達でそのまま固定する動きが確認できる。

サンプル

See the Pen ページ上部に到達した時点で固定するブロック by Tora (@webtoranomaki) on CodePen.

コード

HTML


<div id="wrap">
	<div id="main">
		#main
	</div>
	<div id="side">
		<div class="box box1">box1</div>
		<div class="box box2">box2</div>
		<div class="box fixed-box">fixed-box</div>
	</div>
</div>

CSS


#wrap {
	position: relative;
	width: 800px;
	overflow: hidden;
}
#main {
	float: left;
	width: 600px;
	height: 2500px;
	background: -prefix-linear-gradient(top, #999, #efefef);
	background: linear-gradient(to bottom, #999, #efefef);
}
#side {
	float: right;
	width: 200px;
}
.box {
	height: 300px;
	margin-bottom: 50px;
	color: white;
}
.box1 {
	background: blue;
}
.box2 {
	background: red;
}
.fixed-box {
	background: black;
}
.fixed-box.fixed {
	width: 200px;
	position:fixed;
	top: 0;
}

javascript

jQueryライブラリを読み込む。


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

スクリプトを記述する。


$(function($) {
	var fixbox = $('.fixed-box'),
	offset = fixbox.offset();
	// スクロール量が"固定する要素までの距離"以上で、mainの高さがsideよりも大きい場合に実行
	$(window).scroll(function () {
		if($(window).scrollTop() > offset.top && $('#main').height() > $('#side').height()) {
			fixbox.addClass('fixed');
		} else {
			fixbox.removeClass('fixed');
		}
	});
});

解説

上記のような普通の要素から固定要素に変化する場合、固定要素としてそこから抜ける際に元のスペースが一時的に何もない状態になる。この時に下に要素があると上にずれようとする動きが発生する。エクセルで行を削除すると、下の行が上に動いてるのと同じ感じで。

なので、上記サンプルの場合、例えばbox1とかbox2が固定要素になる場合は、その要素が抜けても高さを確保させるための枠を用意する必要がある。これについては、関連記事「ウィンドウ上部に到達したヘッダーを上部に固定させる方法」を見て欲しい。