{"id":381,"date":"2018-03-10T00:55:40","date_gmt":"2018-03-09T15:55:40","guid":{"rendered":"https:\/\/www.dogrow.net\/hp\/?p=381"},"modified":"2018-03-10T01:02:30","modified_gmt":"2018-03-09T16:02:30","slug":"blog38","status":"publish","type":"post","link":"https:\/\/www.dogrow.net\/hp\/blog38\/","title":{"rendered":"(38) \u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u5b58\u5728\u3092\u793a\u3059\u7e26\u578bIndicator"},"content":{"rendered":"

(1) \u3084\u308a\u305f\u3044\u3053\u3068<\/h1>\n

\u30da\u30fc\u30b8\u5185\u3067\u7e26\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u4e26\u3079\u305f\u5834\u5408\u306b\u3001
\n\u300c\u5168\u4f53\u3067\u3069\u308c\u3060\u3051\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u3042\u308b\u306e\uff1f\u300d
\n\u300c\u4eca\u3069\u306e\u8fba\u3092\u898b\u3066\u3044\u308b\u306e\uff1f\u300d
\n\u3092\u77e5\u3089\u305b\u3066\u3042\u3052\u308b\u305f\u3081\u306e\u60c5\u5831\u3092\u8868\u793a\u3057\u305f\u3044\u3002<\/p>\n

\u5b9f\u88c5\u30b5\u30f3\u30d7\u30eb
\n\"\"<\/a><\/p>\n

(2) \u5b9f\u73fe\u65b9\u6cd5<\/h1>\n

HTML<\/h3>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset="utf-8">\r\n\r\n<script src="\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js"><\/script>\r\n<script src=".\/script.js"><\/script>\r\n<link rel="stylesheet" href=".\/style.css" \/>\r\n\r\n<\/head>\r\n<body>\r\n\r\n<div class="vertIndicator">\r\n\t<ul class="vertIndicator">\r\n\t\t<li>\r\n\t\t\t<a href="#content1"><div class="vertIndLabel">content1<\/div><\/a>\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<a href="#content2"><div class="vertIndLabel">content2<\/div><\/a>\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<a href="#content3"><div class="vertIndLabel">content3<\/div><\/a>\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<a href="#content4"><div class="vertIndLabel">content4<\/div><\/a>\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<a href="#content5"><div class="vertIndLabel">content5<\/div><\/a>\r\n\t\t<\/li>\r\n\t<\/ul>\r\n<\/div>\r\n\r\n<div id="content1" class="vertIndBlock" style="background-color:#ffe;height:500px">Contents#1<\/div>\r\n<div id="content2" class="vertIndBlock" style="background-color:#fef;height:500px">Contents#2<\/div>\r\n<div id="content3" class="vertIndBlock" style="background-color:#eff;height:600px">Contents#3<\/div>\r\n<div id="content4" class="vertIndBlock" style="background-color:#ffe;height:500px">Contents#4<\/div>\r\n<div id="content5" class="vertIndBlock" style="background-color:#fef;height:600px">Contents#5<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS<\/h3>\n
\r\n.vertIndicator {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tright: 30px;\r\n\tz-index: 10;\r\n}\r\n\r\n.vertIndicator ul {\r\n\tposition: relative;\r\n\tlist-style-type: none;\r\n}\r\n\r\n.vertIndicator ul li{\r\n\tposition: relative;\r\n\tpadding-bottom: 10px;\r\n}\r\n\r\n.vertIndicator a{\r\n\tdisplay: block;\r\n\twidth: 10px;\r\n\theight: 10px;\r\n\ttext-indent: -1000px;\r\n\tborder-radius: 50%;\r\n\tborder: 2px solid #888;\r\n\ttext-decoration: none;\r\n}\r\n.vertIndicator a.indActive{\r\n\tbackground-color: #000;\r\n}\r\n.vertIndicator a.indHover{\r\n\tbackground-color: #aaa;\r\n}\r\n\r\n.vertIndLabel {\r\n\tposition: relative;\r\n\ttop: -60%;\r\n\tleft: -200%;\r\n\ttext-align: right;\r\n\tvertical-align: middle;\r\n\tcolor: #888;\r\n\tdisplay: none;\r\n}\r\n<\/pre>\n
JavaScript<\/h3>\n
\r\n$(document).ready(function($){\r\n\tvar catLocate = [];\r\n\t$('.vertIndBlock').each(function() {\r\n\t\tcatLocate.push($(this).offset().top);\r\n\t});\r\n\r\n\tfunction setActive(){\r\n\t\tvar position = $(document).scrollTop();\r\n\t\tvar index;\r\n\t\tfor(var i=0 ; i < catLocate.length ; i++){\r\n\t\t\tif (position <= catLocate[i]) {\r\n\t\t\t\tindex = i; break;\r\n\t\t\t}\r\n\t\t}\r\n\t\t$('.vertIndicator ul li a').removeClass('indActive');\r\n\t\t$('.vertIndicator ul li a').removeClass('indHover');\r\n\t\t$('.vertIndicator ul li a:eq('+index+')').addClass('indActive');\r\n\t}\r\n\tsetActive();\r\n\r\n\t$('a').click(function(){\r\n\t\t$('html, body').animate({\r\n\t\t\tscrollTop: $($.attr(this, 'href')).offset().top\r\n\t\t}, 1000);\r\n\t\treturn false;\r\n\t});\r\n\r\n\t$('.vertIndicator ul li a').click(function () {\r\n\t\t$('.vertIndicator ul li a').removeClass('indActive');\r\n\t\t$(this).addClass('indActive');\r\n\t}); \r\n\r\n\t$('.vertIndicator a').hover(function() {\r\n\t\t$(this).find('.vertIndLabel').show();\r\n\t\t$(this).addClass('indHover');\r\n\t}, function() {\r\n\t\t$(this).find('.vertIndLabel').hide();\r\n\t\t$(this).removeClass('indHover');\r\n\t});\r\n\r\n\t$(document).scroll(function(){\r\n\t\tsetActive();\r\n\t});\r\n\r\n\t$('.vertIndicator ul li a').click(function () {\r\n\t\t$('.vertIndicator ul li a').removeClass('indActive');\r\n\t\t$('.vertIndicator ul li a').removeClass('indHover');\r\n\t\t$(this).addClass('indActive');\r\n\t});   \r\n});\r\n<\/pre>\n
\n","protected":false},"excerpt":{"rendered":"
(1) \u3084\u308a\u305f\u3044\u3053\u3068 \u30da\u30fc\u30b8\u5185\u3067\u7e26\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u4e26\u3079\u305f\u5834\u5408\u306b\u3001 \u300c\u5168\u4f53\u3067\u3069\u308c\u3060\u3051\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u3042\u308b\u306e\uff1f\u300d \u300c\u4eca\u3069\u306e\u8fba\u3092\u898b\u3066\u3044\u308b\u306e\uff1f\u300d \u3092\u77e5\u3089\u305b\u3066\u3042\u3052\u308b\u305f\u3081\u306e\u60c5\u5831\u3092\u8868\u793a\u3057\u305f\u3044\u3002 \u5b9f\u88c5\u30b5\u30f3\u30d7\u30eb (2) \u5b9f\u73fe\u65b9\u6cd5 HTML &\u2026 \u7d9a\u304d\u3092\u8aad\u3080 »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-381","post","type-post","status-publish","format-standard","hentry","category-htmlcss","category-javascriptjquery"],"views":1520,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/comments?post=381"}],"version-history":[{"count":5,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/381\/revisions"}],"predecessor-version":[{"id":387,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/381\/revisions\/387"}],"wp:attachment":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/media?parent=381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/categories?post=381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/tags?post=381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}