(38) コンテンツの存在を示す縦型Indicator

(1) やりたいこと

ページ内で縦にコンテンツを並べた場合に、
「全体でどれだけのコンテンツがあるの?」
「今どの辺を見ているの?」
を知らせてあげるための情報を表示したい。

実装サンプル

(2) 実現方法

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./script.js"></script>
<link rel="stylesheet" href="./style.css" />

</head>
<body>

<div class="vertIndicator">
	<ul class="vertIndicator">
		<li>
			<a href="#content1"><div class="vertIndLabel">content1</div></a>
		</li>
		<li>
			<a href="#content2"><div class="vertIndLabel">content2</div></a>
		</li>
		<li>
			<a href="#content3"><div class="vertIndLabel">content3</div></a>
		</li>
		<li>
			<a href="#content4"><div class="vertIndLabel">content4</div></a>
		</li>
		<li>
			<a href="#content5"><div class="vertIndLabel">content5</div></a>
		</li>
	</ul>
</div>

<div id="content1" class="vertIndBlock" style="background-color:#ffe;height:500px">Contents#1</div>
<div id="content2" class="vertIndBlock" style="background-color:#fef;height:500px">Contents#2</div>
<div id="content3" class="vertIndBlock" style="background-color:#eff;height:600px">Contents#3</div>
<div id="content4" class="vertIndBlock" style="background-color:#ffe;height:500px">Contents#4</div>
<div id="content5" class="vertIndBlock" style="background-color:#fef;height:600px">Contents#5</div>

</body>
</html>

CSS

.vertIndicator {
	position: fixed;
	top: 50%;
	right: 30px;
	z-index: 10;
}

.vertIndicator ul {
	position: relative;
	list-style-type: none;
}

.vertIndicator ul li{
	position: relative;
	padding-bottom: 10px;
}

.vertIndicator a{
	display: block;
	width: 10px;
	height: 10px;
	text-indent: -1000px;
	border-radius: 50%;
	border: 2px solid #888;
	text-decoration: none;
}
.vertIndicator a.indActive{
	background-color: #000;
}
.vertIndicator a.indHover{
	background-color: #aaa;
}

.vertIndLabel {
	position: relative;
	top: -60%;
	left: -200%;
	text-align: right;
	vertical-align: middle;
	color: #888;
	display: none;
}

JavaScript

$(document).ready(function($){
	var catLocate = [];
	$('.vertIndBlock').each(function() {
		catLocate.push($(this).offset().top);
	});

	function setActive(){
		var position = $(document).scrollTop();
		var index;
		for(var i=0 ; i < catLocate.length ; i++){
			if (position <= catLocate[i]) {
				index = i; break;
			}
		}
		$('.vertIndicator ul li a').removeClass('indActive');
		$('.vertIndicator ul li a').removeClass('indHover');
		$('.vertIndicator ul li a:eq('+index+')').addClass('indActive');
	}
	setActive();

	$('a').click(function(){
		$('html, body').animate({
			scrollTop: $($.attr(this, 'href')).offset().top
		}, 1000);
		return false;
	});

	$('.vertIndicator ul li a').click(function () {
		$('.vertIndicator ul li a').removeClass('indActive');
		$(this).addClass('indActive');
	}); 

	$('.vertIndicator a').hover(function() {
		$(this).find('.vertIndLabel').show();
		$(this).addClass('indHover');
	}, function() {
		$(this).find('.vertIndLabel').hide();
		$(this).removeClass('indHover');
	});

	$(document).scroll(function(){
		setActive();
	});

	$('.vertIndicator ul li a').click(function () {
		$('.vertIndicator ul li a').removeClass('indActive');
		$('.vertIndicator ul li a').removeClass('indHover');
		$(this).addClass('indActive');
	});   
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です