908 views
この記事は最終更新から 2405日 が経過しています。
(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');
});
});