{"id":964,"date":"2015-06-09T20:10:37","date_gmt":"2015-06-09T11:10:37","guid":{"rendered":"http:\/\/vast.bz\/wp\/?p=964"},"modified":"2015-07-22T12:12:00","modified_gmt":"2015-07-22T03:12:00","slug":"fixed-navi","status":"publish","type":"post","link":"https:\/\/vast.bz\/?p=964","title":{"rendered":"\u30d8\u30c3\u30c0\u30fc\u3084\u30da\u30fc\u30b8\u30c8\u30c3\u30d7\u306e\u8ffd\u5c3e\u7cfb\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306e\u30bd\u30fc\u30b9\u307e\u3068\u3081"},"content":{"rendered":"<p class=\"img\"><img decoding=\"async\" src=\"https:\/\/vast.bz\/wp\/wp-content\/uploads\/2015\/06\/navi_img.jpg\"><\/p>\n<p class=\"m_b20\">\n\u6700\u8fd1\u3088\u304f\u4f7f\u3046\u306e\u3067\u30b3\u30d4\u30da\u7528\u306b\u3002<br \/>\nCSS\u306f\u5927\u4e8b\u306a\u3068\u3053\u3060\u3051\u30e1\u30e2\u3002\n<\/p>\n<h2>\u30d8\u30c3\u30c0\u30fc\u56fa\u5b9a\u30fb\u8ffd\u5c3e<\/h2>\n<p class=\"m_b20\">\n\u30d8\u30c3\u30c0\u30fc\u306e\u30ed\u30b4\u306f\u305d\u306e\u307e\u307e\u4e0a\u306b\u6b8b\u3057\u3066\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3060\u3051\u8ffd\u5c3e\u3057\u3066\u304f\u308b\u30bf\u30a4\u30d7\u3002<br \/>\n\u4e00\u756a\u4e0a\u307e\u3067\u623b\u308b\u3068\u30ed\u30b4\u304c\u307e\u305f\u51fa\u3066\u304f\u308b\u3002<br \/>\n\u56fa\u5b9a\u3057\u305f\u4e8b\u306b\u3088\u308a\u30a2\u30f3\u30ab\u30fc\u4f4d\u7f6e\u304c\u305a\u308c\u306a\u3044\u3088\u3046\u306b\u6ce8\u610f\u3002\n<\/p>\n<p class=\"m_b20\">\n<a href=\"\/wp-content\/themes\/vast\/demo\/navigation\/demo01.html\" target=\"_blank\">\u30c7\u30e201<\/a>\n<\/p>\n<h3>html<\/h3>\n<pre class=\"brush:xhtml;\">\r\n<header id=\"head\">\r\n\t<h1>\u30ed\u30b4<\/h1>\r\n\t<nav>\r\n\t\t<ul>\r\n\t\t\t<li><a href=\"#nav01\">\u30ca\u30d301<\/a><\/li>\r\n\t\t\t<li><a href=\"#nav02\">\u30ca\u30d302<\/a><\/li>\r\n\t\t\t<li><a href=\"#nav03\">\u30ca\u30d303<\/a><\/li>\r\n\t\t\t<li><a href=\"#nav04\">\u30ca\u30d304<\/a><\/li>\r\n\t\t<\/ul>\r\n\t<\/nav>\r\n<\/header>\r\n<\/pre>\n<h3>css<\/h3>\n<pre class=\"brush:xhtml;\">\r\nheader nav{\r\n\theight:45px;\r\n}\r\n.fixed{\r\n\tposition:fixed;\r\n\tleft:0;\r\n\ttop:0;\r\n\tz-index:1000;\r\n}\r\n<\/pre>\n<h3>js<\/h3>\n<pre class=\"brush:js;\">\r\n$(function() {\r\n\tvar nav = $('nav ul');\r\n\tvar navTop = nav.offset().top;\r\n\t$(window).on('load scroll', function(){\r\n\t\t  if ($(this).scrollTop() > navTop) {\r\n\t\t  \tnav.addClass('fixed');\r\n\t\t  }else{\r\n\t\t  \tnav.removeClass('fixed');\r\n\t\t  }\r\n\t});\r\n});\r\n\r\n\r\n\/\/\u30b9\u30af\u30ed\u30fc\u30eb\u7528\r\n$(function(){\r\n\tvar nav_H = $('nav').height();\/*\u30ca\u30d3\u306e\u9ad8\u3055\u53d6\u5f97*\/\r\n\t$('a[href^=#]').click(function(){\r\n\t\tvar speed = 500;\r\n\t\tvar href= $(this).attr(\"href\");\r\n\t\tvar target = $(href == \"#\" || href == \"\" ? 'html' : href);\r\n\t\tvar position = target.offset().top - nav_H;\/*\u30ca\u30d3\u5206\u306e\u9ad8\u3055\u3092\u305a\u3089\u3059*\/\r\n\t\t$(\"html, body\").animate({scrollTop:position}, speed, \"swing\");\r\n\t\treturn false;\r\n\t});\r\n});\r\n<\/pre>\n<h2 class=\"m_t30\">\u30da\u30fc\u30b8\u30c8\u30c3\u30d7\u8ffd\u5c3e\u30dc\u30bf\u30f3(\u56fa\u5b9a\u30d0\u30fc\u30b8\u30e7\u30f3)<\/h2>\n<p class=\"m_b20\">\n\u300c\u30da\u30fc\u30b8\u30c8\u30c3\u30d7\u300d\u306e\u30dc\u30bf\u30f3\u304c\u53f3\u4e0b\u306b\u56fa\u5b9a\u8868\u793a\u3055\u308c\u308b\u3084\u3064\u3002<br \/>\n\u30b9\u30af\u30ed\u30fc\u30eb\u304c\u4e00\u756a\u4e0a\u306b\u304f\u308b\u3068\u6d88\u3048\u308b\u3002\n<\/p>\n<p class=\"m_b20\">\n<a href=\"\/wp-content\/themes\/vast\/demo\/navigation\/demo02.html\" target=\"_blank\">\u30c7\u30e202<\/a>\n<\/p>\n<h3>html<\/h3>\n<pre class=\"brush:xhtml;\">\r\n<p id=\"pagetop\"><a href=\"#head\">TOP\u3078\u623b\u308b<\/a><\/p>\r\n<\/pre>\n<h3>css<\/h3>\n<pre class=\"brush:css;\">\r\n#pagetop{\r\n\tposition: fixed;\r\n\tbottom: 50px;\r\n\tright: 20px;\r\n\tz-index:1000;\r\n}\r\n<\/pre>\n<h3>js<\/h3>\n<pre class=\"brush:js;\">\r\n$(function() {\r\n\tvar topBtn = $('#pagetop');\t\r\n\ttopBtn.hide();\r\n\t$(window).on('load scroll', function(){\r\n\t\tif ($(this).scrollTop() > 100) {\/*100\u306f\u8868\u793a\u3055\u308c\u308b\u30bf\u30a4\u30df\u30f3\u30b0\u3092\u9069\u5f53\u306b*\/\r\n\t\t\ttopBtn.fadeIn();\r\n\t\t} else {\r\n\t\t\ttopBtn.fadeOut();\r\n\t\t}\r\n\t});\r\n});\r\n<\/pre>\n<h2 class=\"m_t30\">\u30d5\u30c3\u30bf\u30fc\u3067\u6b62\u307e\u308b\u30da\u30fc\u30b8\u30c8\u30c3\u30d7\u8ffd\u5c3e\u30dc\u30bf\u30f3<\/h2>\n<p class=\"m_b20\">\n\u57fa\u672c\u306f\u4e0a\u3068\u540c\u3058\u3060\u304c\u30d5\u30c3\u30bf\u30fc\u30a8\u30ea\u30a2\u306b\u304f\u308b\u3068\u8ffd\u5c3e\u304c\u6b62\u307e\u308b\u30d1\u30bf\u30fc\u30f3\u3002<br \/>\n\u30dd\u30b8\u30b7\u30e7\u30f3\u3067\u3084\u308b\u65b9\u6cd5\u3082\u3042\u308b\u3051\u3069\u3088\u304fpagetop\u3092float:right\u3067\u53f3\u306b\u5bc4\u305b\u3061\u3083\u3046\u304b\u3089margin\u6307\u5b9a\u3067\u8ffd\u5c3e\u3059\u308b\u3084\u3064\u3002\n<\/p>\n<p class=\"m_b20\">\n<a href=\"\/wp-content\/themes\/vast\/demo\/navigation\/demo03.html\" target=\"_blank\">\u30c7\u30e203<\/a>\n<\/p>\n<h3>html<\/h3>\n<pre class=\"brush:xhtml;\">\r\n<p id=\"pagetop\"><a href=\"#head\">TOP\u3078\u623b\u308b<\/a><\/p>\r\n<\/pre>\n<h3>css<\/h3>\n<pre class=\"brush:css;\">\r\n#pagetop{width:100%;}\r\n#pagetop a{\r\n\tdisplay:block;\r\n\tfloat:right;\r\n}\r\n<\/pre>\n<h3>js<\/h3>\n<pre class=\"brush:js;\">\r\n$(function() {\r\n\tvar pagetop = $('#pagetop a');\r\n\tvar pagetopH = $('#pagetop a').outerHeight();\r\n\tvar navBottom = pagetop.offset().top;\r\n\t\r\n\tpagetop.hide();\r\n\t\t\r\n\t$(window).on('load scroll', function(){\t\r\n\t\tvar pagetopA = $(window).outerHeight() + $(this).scrollTop() - pagetopH;\r\n\t\tvar pagetopD = pagetopA - navBottom;\r\n\t\tif (navBottom >= pagetopA) {\r\n\t\t\tpagetop.css('margin-top',pagetopH*-1+pagetopD+'px');\r\n\t\t} else {\r\n\t\t\tpagetop.css('margin-top',pagetopH*-1+'px');\r\n\t\t}\r\n\t\t\r\n\t\t\/*\u30c8\u30c3\u30d7\u306b\u6765\u305f\u3089\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8*\/\r\n\t\tif ($(this).scrollTop() > 100) {\r\n\t\t\tpagetop.fadeIn();\r\n\t\t} else {\r\n\t\t\tpagetop.fadeOut();\r\n\t\t}\r\n\t});\r\n\t\r\n});\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u6700\u8fd1\u3088\u304f\u4f7f\u3046\u306e\u3067\u30b3\u30d4\u30da\u7528\u306b\u3002 CSS\u306f\u5927\u4e8b\u306a\u3068\u3053\u3060\u3051\u30e1\u30e2\u3002 \u30d8\u30c3\u30c0\u30fc\u56fa\u5b9a\u30fb\u8ffd\u5c3e \u30d8\u30c3\u30c0\u30fc\u306e\u30ed\u30b4\u306f\u305d\u306e\u307e\u307e\u4e0a\u306b\u6b8b\u3057\u3066\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3060\u3051\u8ffd\u5c3e\u3057\u3066\u304f\u308b\u30bf\u30a4\u30d7\u3002 \u4e00\u756a\u4e0a\u307e\u3067\u623b\u308b\u3068\u30ed\u30b4\u304c\u307e\u305f\u51fa\u3066\u304f\u308b\u3002 \u56fa\u5b9a\u3057\u305f\u4e8b\u306b\u3088\u308a\u30a2\u30f3\u30ab\u30fc\u4f4d\u7f6e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-964","post","type-post","status-publish","format-standard","hentry","category-jquery"],"acf":[],"_links":{"self":[{"href":"https:\/\/vast.bz\/index.php?rest_route=\/wp\/v2\/posts\/964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vast.bz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vast.bz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vast.bz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vast.bz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=964"}],"version-history":[{"count":0,"href":"https:\/\/vast.bz\/index.php?rest_route=\/wp\/v2\/posts\/964\/revisions"}],"wp:attachment":[{"href":"https:\/\/vast.bz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vast.bz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vast.bz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}