{"id":3034,"date":"2021-10-17T22:35:13","date_gmt":"2021-10-17T13:35:13","guid":{"rendered":"https:\/\/blue-bear.jp\/kb\/?p=3034"},"modified":"2021-10-17T22:35:15","modified_gmt":"2021-10-17T13:35:15","slug":"%e4%b8%8a%e3%81%ab%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%99%e3%82%8b%e3%81%a8%e5%87%ba%e3%81%a6%e3%81%8d%e3%81%a6%e4%b8%8b%e3%81%ab%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%99","status":"publish","type":"post","link":"https:\/\/blue-bear.jp\/kb\/%e4%b8%8a%e3%81%ab%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%99%e3%82%8b%e3%81%a8%e5%87%ba%e3%81%a6%e3%81%8d%e3%81%a6%e4%b8%8b%e3%81%ab%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%99\/","title":{"rendered":"\u4e0a\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b\u3068\u51fa\u3066\u304d\u3066\u4e0b\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b\u3068\u975e\u8868\u793a\u306b\u306a\u308b\u30e1\u30cb\u30e5\u30fc"},"content":{"rendered":"\n<p>\u4e0a\u3084\u4e0b\u306b\u30e1\u30cb\u30e5\u30fc\u3092\u56fa\u5b9a\u3059\u308b\u3068\u30e6\u30fc\u30b6\u306b\u52b9\u679c\u7684\u306b\u30e1\u30cb\u30e5\u30fc\u3092\u898b\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u304c\u3001\u305a\u3063\u3068\u4e0a\u3084\u4e0b\u306b\u56fa\u5b9a\u3067\u30e1\u30cb\u30e5\u30fc\u306b\u3042\u308b\u3068\u8868\u793a\u30a8\u30ea\u30a2\u304c\u5c11\u306a\u304f\u306a\u308b\u305f\u3081\u3001\u4e0a\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b\u3068\u30e1\u30cb\u30e5\u30fc\u304c\u8868\u793a\u3055\u308c\u3001\u4e0b\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b\u3068\u975e\u8868\u793a\u306b\u306a\u308b\u30e1\u30cb\u30e5\u30fc\u3092\u5b9f\u88c5\u3059\u308b\u306b\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3002<\/p>\n\n\n\n<p>\u5b9f\u88c5\u3059\u308b\u306b\u306fJquery\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u3001\u5148\u306bJquery\u3092\u8aad\u307f\u8fbc\u3093\u3067\u304a\u304f<\/p>\n\n\n\n<pre class=\"wp-block-verse\">&lt;script\n src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"\n integrity=\"sha256-\/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej\/m4=\"\n crossorigin=\"anonymous\">\n&lt;\/script><\/pre>\n\n\n\n<p>\u30e1\u30cb\u30e5\u30fc\u306e\u90e8\u5206\u306eCSS\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3002\u6700\u521d\u306f\u975e\u8868\u793a\u306b\u3059\u308b\u305f\u3081top:-100px\u3067\u8868\u793a\u30a8\u30ea\u30a2\u5916\u306b\u304a\u3044\u3066\u304a\u304f\u3002transition\u306f1s\u306b\u8a2d\u5b9a\u3057\u30661\u79d2\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u308b\u3002\u3042\u3068\u306fJquery\u3067\u300cds_nav\u300d\u306e\u8981\u7d20\u306b\u300cisActive\u300d\u3092\u4ed8\u52a0\u3057\u3066top:0px\u3067\u30a8\u30ea\u30a2\u5185\u306b\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u308b<\/p>\n\n\n\n<pre class=\"wp-block-verse\">#ds_nav {\n width: 100%;\n text-align: center;\n background-color: #000;\n font-size: 0;\n margin: 0px auto 0px auto;\n z-index: 200;\n opacity:0.85;\n color:#fff;\n left: 0;\n right: 0;\n top:-100px;\n position: fixed;\n transition: 1s;\n}\n#ds_nav.isActive {\n top:0px;\n}<\/pre>\n\n\n\n<p>\u30e1\u30cb\u30e5\u30fc\u90e8\u5206\u306eHTML\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3002\u3068\u308a\u3042\u3048\u305a\u5916\u5074\u3060\u3051<\/p>\n\n\n\n<pre class=\"wp-block-verse\">&lt;nav id=\"ds_nav\">\n\u30fb\u30fb\u30fb\u30e1\u30cb\u30e5\u30fc\u306e\u4e2d\u8eab\u3092\u66f8\u304f\n&lt;\/nav><\/pre>\n\n\n\n<p>\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u8868\u793a\u30fb\u975e\u8868\u793a\u3055\u305b\u308bJquery\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3002\u4e0b\u306e\u30b3\u30fc\u30c9\u306fTOP\u304b\u3089300px\u96e2\u308c\u3066\u3044\u308b\u72b6\u614b\u3067\u3001\u4e0a\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b\u3068\u30e1\u30cb\u30e5\u30fc\u304c\u4e0a\u304b\u3089\u51fa\u3066\u304f\u308b\uff08class\u306eisActive\u3092\u4ed8\u4e0e\u3059\u308b\uff09\u3002\u4e0b\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b\u3068\u3001\u30e1\u30cb\u30e5\u30fc\u304c\u4e0a\u306b\u5f15\u3063\u8fbc\u3080\uff08class\u306eisActive\u3092\u524a\u9664\u3059\u308b\uff09<\/p>\n\n\n\n<p>\u5e38\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u306ePosition\u3092pos\u3068\u3044\u3046\u5909\u6570\u306b\u5165\u308c\u8fbc\u3093\u3067\u3044\u308b<\/p>\n\n\n\n<pre class=\"wp-block-verse\">&lt;script>\n $(function(){\n  var pos = 0;\n  var header = $('#ds_nav');\n\n  $(window).on('scroll', function(){\n   if($(this).scrollTop() > 300){\n    if($(this).scrollTop() &lt; pos ){\n     \/\/\u4e0a\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u305f\u3068\u304d\n     header.addClass('isActive');\n    }else{\n    \/\/\u4e0b\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u305f\u3068\u304d\n     header.removeClass('isActive');\n    }\n   }else{\n    header.removeClass('isActive');\n   }\n   pos = $(this).scrollTop();\n  });\n });\n&lt;\/script><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0a\u3084\u4e0b\u306b\u30e1\u30cb\u30e5\u30fc\u3092\u56fa\u5b9a\u3059\u308b\u3068\u30e6\u30fc\u30b6\u306b\u52b9\u679c<\/p>\n","protected":false},"author":1,"featured_media":46,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[116,245,312],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blue-bear.jp\/kb\/wp-json\/wp\/v2\/posts\/3034"}],"collection":[{"href":"https:\/\/blue-bear.jp\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blue-bear.jp\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blue-bear.jp\/kb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blue-bear.jp\/kb\/wp-json\/wp\/v2\/comments?post=3034"}],"version-history":[{"count":1,"href":"https:\/\/blue-bear.jp\/kb\/wp-json\/wp\/v2\/posts\/3034\/revisions"}],"predecessor-version":[{"id":3035,"href":"https:\/\/blue-bear.jp\/kb\/wp-json\/wp\/v2\/posts\/3034\/revisions\/3035"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blue-bear.jp\/kb\/wp-json\/wp\/v2\/media\/46"}],"wp:attachment":[{"href":"https:\/\/blue-bear.jp\/kb\/wp-json\/wp\/v2\/media?parent=3034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blue-bear.jp\/kb\/wp-json\/wp\/v2\/categories?post=3034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blue-bear.jp\/kb\/wp-json\/wp\/v2\/tags?post=3034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}