jQuery・シンプルなスクロールスパイを作りました [PC限定/IE9対応]

150907_001

デモを見る

実務で必要だった、しかしBootstrapは余計なコードだらけなので使いたくない、従って自作。
スマホは…？　Bootstrapを使おう。

検証済みブラウザとOS

IE 9～
Firefox
Google Chrome
Safari
Windows 7
OS X Yosemite

このjQueryで出来ること、出来ないこと

出来ること

ナビリンクをクリックで該当要素へスムーススクロール
サイドナビをマウスオーバーするとテキストをポップアップ（jQuery関係なし）

出来ないこと: タッチデバイスで正確な位置を特定すること

要点とコード

HTML

該当要素に class=”block” を指定

<section id="keyvisual" class="block">
<h1>ご挨拶</h1>
<p>テキスト</p>
<!-- /#keyvisual --></section>

<section id="block-01" class="block">
<h1>サービス紹介</h1>
<p>テキスト</p>
<!-- /#block-01 --></section>

<section id="block-02" class="block">
<h1>制作実績</h1>
<p>テキスト</p>
<!-- /#block-02 --></section>

<section id="block-03" class="block">
<h1>経営理念</h1>
<p>テキスト</p>
<!-- /#block-03 --></section>

<section id="block-04" class="block">
<h1>会社概要</h1>
<p>テキスト</p>
<!-- /#block-04 --></section>

<section id="block-05" class="block">
<h1>お問い合わせ</h1>
<p>テキスト</p>
<!-- /#block-05 --></section>

<nav id="scrollspy">
<ul>
	<li><a href="#keyvisual">ご挨拶</a></li><!-- 
	 --><li><a href="#block-01">サービス紹介</a></li><!-- 
	 --><li><a href="#block-02">制作実績</a></li><!-- 
	 --><li><a href="#block-03">経営理念</a></li><!-- 
	 --><li><a href="#block-04">会社概要</a></li><!-- 
	 --><li><a href="#block-05">お問い合わせ</a></li>
</ul>
<!-- /#scrollspy --></nav>

<nav id="scrollspy-side">
<ul>
	<li><a href="#keyvisual"></a><div>ご挨拶</div></li>
	<li><a href="#block-01"></a><div>サービス紹介</div></li>
	<li><a href="#block-02"></a><div>制作実績</div></li>
	<li><a href="#block-03"></a><div>経営理念</div></li>
	<li><a href="#block-04"></a><div>会社概要</div></li>
	<li><a href="#block-05"></a><div>お問い合わせ</div></li>
</ul>
<!-- /#scrollspy-side --></nav>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
<script src="js/scrollspy.js"></script>

</section>

<h1>サービス紹介</h1>

</section>

</section>

</section>

</section>

<h1>お問い合わせ</h1>

</section>

<ul>

<li><a href="#keyvisual">ご挨拶</a></li><!--

--><li><a href="#block-01">サービス紹介</a></li><!--

--><li><a href="#block-02">制作実績</a></li><!--

--><li><a href="#block-03">経営理念</a></li><!--

--><li><a href="#block-04">会社概要</a></li><!--

--><li><a href="#block-05">お問い合わせ</a></li>

</ul>

</nav>

<ul>

<li><a href="#block-01"></a><div>サービス紹介</div></li>

<li><a href="#block-05"></a><div>お問い合わせ</div></li>

</ul>

</nav>

SCSS

ナビゲーションは fixed で固定表示
サイドナビのマウスオーバーテキストはリストタグ内に absolute で配置して、display: none; で非表示に。li:hover div に display: block; を指定して表示。

/* block
   ========================================================================== */
#keyvisual {
	height: 100%;
	color: white;
	padding: 30px;
	background: #c4b273
}

.block {
	height: 100%;
	color: white;
	padding: 30px;
}

#block-01 {background: #5d8f88;}
#block-02 {background: #30322e;}
#block-03 {background: #314d5b;}
#block-04 {background: #e1f5d7;}
#block-05 {background: #cff7fb;}


/* scroll spy
   ========================================================================== */
#scrollspy {
	position: fixed;
	top: 0;
	right: 0;

	li {
		display: inline-block;
	}

	a {
		color: white;
		text-decoration: none;
		display: block;
		padding: 10px;
		background: #ccc;
	}

	a:hover, .active {
		background: #666;
	}
}

#scrollspy-side {
	position: fixed;
	top: 35%;
	right: 30px;

	li {
		position: relative;
		margin-bottom: 20px;
		&:hover div {
			display: block;
		}
	}

	div {
		width: 120px;
		color: white;
		text-align: center;
		display: none;
		position: absolute;
		right: 100%;
		bottom: 0;
		padding: 10px 0;
		background: #666;
	}

	a {
		width: 20px;
		height: 20px;
		display: block;
		background: #ccc;
	}

	a:hover, .active {
		background: #666;
	}
}

/* block

========================================================================== */

#keyvisual {

height: 100%;

color: white;

padding: 30px;

background: #c4b273

}

.block {

height: 100%;

color: white;

padding: 30px;

}

#block-01 {background: #5d8f88;}

#block-02 {background: #30322e;}

#block-03 {background: #314d5b;}

#block-04 {background: #e1f5d7;}

#block-05 {background: #cff7fb;}

/* scroll spy

========================================================================== */

#scrollspy {

position: fixed;

top: 0;

right: 0;

li {

display: inline-block;

}

a {

color: white;

text-decoration: none;

display: block;

padding: 10px;

background: #ccc;

}

a:hover, .active {

background: #666;

}

#scrollspy-side {

position: fixed;

top: 35%;

right: 30px;

li {

position: relative;

margin-bottom: 20px;

&:hover div {

display: block;

}

div {

width: 120px;

color: white;

text-align: center;

display: none;

position: absolute;

right: 100%;

bottom: 0;

padding: 10px 0;

background: #666;

}

a {

width: 20px;

height: 20px;

display: block;

background: #ccc;

}

a:hover, .active {

background: #666;

}

jQuery

.each() メソッドを使い各要素を個別に処理
for ループで該当要素を減少させた後、break でループ停止
要素トップから – 0.1 を指定することで、ナビゲーションを正確にアクティブ化させる
スムーススクロールは Velocity.js を利用

/*
Monitor scrolling
Author: KEITA HIRAI
URL: keitahirai.net
*/
$(function(){
	var Window = $(window),
		blockTop = new Array(),
		active = -1;

	// 各要素 top
	$(".block").each(function(i) {
		blockTop[i] = $(this).offset().top;
	});

	// 該当要素の最後がスクロールを過ぎればループ停止
	Window.scroll(function() {
		for (var i = blockTop.length - 1 ; i >= 0; i--) {
			if (Window.scrollTop() > blockTop[i] - 0.1) {
				changeBlock(i);
				break;
			}
		}
	});

	changeBlock(0); // 第一要素に .active 付与
	function changeBlock(block) {
		if (block != active) {
			active = block;
			blockCurrent = block + 1; // 第二要素以降

			$("#scrollspy, #scrollspy-side").find("a").removeClass("active");
			$('#scrollspy-side li:nth-child(' + blockCurrent + ')').find("a").addClass("active");
			$('#scrollspy li:nth-child(' + blockCurrent + ')').find("a").addClass("active");
		}
	}

	// smooth scroll
	$("a[href^=#]").click(function() {
		var link = $(this).attr("href"),
			target = $(link === "#" || link === "" ? "html" : link);

		target.velocity("scroll", {
			duration: 400,
			easing: "ease-out"
		});
		return false;
	});
});

Monitor scrolling

Author: KEITA HIRAI

URL: keitahirai.net

$(function(){

var Window = $(window),

blockTop = new Array(),

active = -1;

// 各要素 top

$(".block").each(function(i) {

blockTop[i] = $(this).offset().top;

});

// 該当要素の最後がスクロールを過ぎればループ停止

Window.scroll(function() {

for (var i = blockTop.length - 1 ; i >= 0; i--) {

if (Window.scrollTop() > blockTop[i] - 0.1) {

changeBlock(i);

break;

}

});

changeBlock(0); // 第一要素に .active 付与

function changeBlock(block) {

if (block != active) {

active = block;

blockCurrent = block + 1; // 第二要素以降

$("#scrollspy, #scrollspy-side").find("a").removeClass("active");

$('#scrollspy-side li:nth-child(' + blockCurrent + ')').find("a").addClass("active");

$('#scrollspy li:nth-child(' + blockCurrent + ')').find("a").addClass("active");

}

// smooth scroll

$("a[href^=#]").click(function() {

var link = $(this).attr("href"),

target = $(link === "#" || link === "" ? "html" : link);

target.velocity("scroll", {

duration: 400,

easing: "ease-out"

});

return false;

});

カスタマイズ

ナビゲーションを画像にしたい: a / a:hover / .active に背景画像を指定する。

鼻ちょうちん

jQuery・シンプルなスクロールスパイを作りました [PC限定/IE9対応]

検証済みブラウザとOS

このjQueryで出来ること、出来ないこと

要点とコード

HTML

SCSS

jQuery

カスタマイズ

コメントを投稿する返信をキャンセル

jQuery・シンプルなスクロールスパイを作りました [PC限定/IE9対応]

検証済みブラウザとOS

このjQueryで出来ること、出来ないこと

要点とコード

HTML

SCSS

jQuery

カスタマイズ

コメントを投稿する 返信をキャンセル

コメントを投稿する返信をキャンセル