特定位置までスクロールすると要素が追従する処理を実装する

特定位置までスクロールすると、要素が追従してくる処理を実装してみます。

サンプルコード

ヘッダーの下に配置したナビゲーションを、スクロール時は上部に追従するようにしてみます。

HTML

.navを追従します。

<div id="page">
	<header class="header">
		ヘッダー
	</header>
	<div class="nav-wrapper">
		<div class="nav">
			ナビゲーション
		</div>
	</div>
	<div class="contents">
		<p>メインコンテンツ</p>
	</div>
</div>

CSS

追従時は.is-fixedを付与して、position: fixed;が適用されるようにします。
.is-fixedが付与されたときに.navの高さ分ずれてしまうのを防ぐために、.navを.nav-wrapperで括って高さ分の領域を確保しています。

.header {
	height: 50px;
	background: #999999;
}
.nav-wrapper { /* .navの領域確保用 */
	height: 50px;
}
.nav {
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background: #666666;
}
.nav.is-fixed {
	position: fixed;
}
.contents {
	width: 960px;
	height: 1500px;
	margin: 0 auto;
	background: #cccccc;
}

JavaScript

スクロール位置に応じて.is-fixedを付与します。

$(function() {
	var $fixElement = $('.nav'); // 追従する要素
	var baseFixPoint = $fixElement.offset().top; // 追従する要素の初期位置
	var fixClass = 'is-fixed'; // 追従時に付与するclass

	// 要素が追従する処理
	function fixFunction() {
		var windowScrolltop = $(window).scrollTop();
		// スクロールが初期位置を通過しているとき
		if(windowScrolltop >= baseFixPoint) {
			$fixElement.addClass(fixClass);
		} else {
			$fixElement.removeClass(fixClass);
		}
	}

	$(window).on('load scroll', function() {
		fixFunction();
	});
});

ヘッダー下のナビゲーションを追従させるデモページ
　

先ほどとほぼ同じですが、コンテンツ中にあるナビゲーションを追従させてみます。

HTML

<div id="page">
	<header class="header">
		ヘッダー
	</header>
	<div class="contents">
		<div class="visual">
			メインビジュアル的なもの
		</div>
		<div class="nav-wrapper">
			<div class="nav">
				ナビゲーション
			</div>
		</div>
		<div class="main">
			<p>メインコンテンツ</p>
		</div>
	</div>
</div>

CSS

.header {
	height: 50px;
	background: #999999;
}
.contents {
	position: relative;
}
.visual {
	width: 960px;
	margin: 0 auto;
	padding: 200px 0;
	color: #ffffff;
	text-align: center;
	background: #333333;
}
.nav-wrapper { /* .navの領域確保用 */
	height: 50px;
}
.nav {
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background: #cccccc;
}
.nav.is-fixed {
	position: fixed;
}
.main {
	width: 960px;
	height: 1500px;
	margin: 0 auto;
	background: #666666;
}

JavaScriptは先ほどと同じため、省略します。
コンテンツ中のナビゲーション追従のデモページ
　

サイドナビを追従させてみます。

HTML

<div id="page">
	<header class="header">
		ヘッダー
	</header>
	<div class="contents clearfix">
		<div class="main">
			<p>メインコンテンツ</p>
			<p>メインコンテンツ</p>
			<p>メインコンテンツ</p>
		</div>
		<div class="nav-wrapper">
			<div class="nav">
				<p>ナビゲーション</p>
				<p>ナビゲーション</p>
				<p>ナビゲーション</p>
				<p>ナビゲーション</p>
				<p>ナビゲーション</p>
			</div>
		</div>
	</div>
</div>

CSS

.header {
	height: 50px;
	background: #999999;
}
.contents {
	width: 960px;
	margin: 0 auto;
}
.main {
	float: left;
	width: 740px;
	height: 1500px;
	background: #cccccc;
}
.nav-wrapper { /* .navの領域確保用 */
	float: right;
	width: 200px;
}
.nav {
	top: 0;
	width: 200px;
	background: #cccccc;
}
.nav.is-fixed {
	position: fixed;
}

JavaScriptは先ほどと同じため、省略します。
サイドナビ追従のデモページ