{"id":187,"date":"2018-01-24T13:34:23","date_gmt":"2018-01-24T04:34:23","guid":{"rendered":"http:\/\/genicca.wp.xdomain.jp\/?p=187"},"modified":"2025-02-13T11:54:51","modified_gmt":"2025-02-13T02:54:51","slug":"%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%ae%e3%83%8a%e3%83%93%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%82%e3%81%a8%e3%81%8b%e3%82%89%e3%81%ac%e3%82%8b%e3%81%a3%e3%81%a8%e5%87%ba%e3%81%97","status":"publish","type":"post","link":"https:\/\/genicca.cloudfree.jp\/?p=187","title":{"rendered":"\u30d8\u30c3\u30c0\u30fc\u306e\u30ca\u30d3\u3092\u56fa\u5b9a\u3057\u3066\u3042\u3068\u304b\u3089\u306c\u308b\u3063\u3068\u51fa\u3057\u305f\u3044\u3068\u304b"},"content":{"rendered":"

\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u305f\u3089\u3001\u30d8\u30c3\u30c0\u30fc\u306e\u30ca\u30d3\u304c\u3042\u3068\u304b\u3089\u30cb\u30e5\u3063\u3068\u51fa\u3066\u304f\u308b\u30b5\u30a4\u30c8\u3042\u308b\u3088\u306d\u3002\u305d\u308c\u3002<\/p>\n

HTML<\/p>\n

\n
<header>\r\n\r\n  ...\r\n\r\n<\/header>\r\n\r\n<nav>\r\n...\r\n<\/nav>\r\n\r\n<main>\r\n...\r\n<\/main>\r\n\r\n<footer>\r\n...\r\n<\/footer><\/code><\/pre>\n<\/div>\n
CSS<\/p>\n
\n
.clone-nav {\r\nposition: fixed;\r\ntop: 0;\r\nleft: 0;\r\nz-index: 2;\r\nwidth: 100%;\r\ntransition: .3s;\r\ntransform: translateY(-100%);\r\n}\r\n.is-show {\r\ntransform: translateY(0);\r\n}<\/code><\/pre>\n<\/div>\n
JS<\/p>\n
\n
$(function() {\r\n\r\n  var $win = $(window),\r\n\r\n      $cloneNav = $('nav').clone().addClass('clone-nav').appendTo('body'),\r\n\r\n      showClass = 'is-show';\r\n\r\n$win.on('load scroll', function() {\r\nvar value = $(this).scrollTop();\r\nif ( value > 700 ) {\r\n$cloneNav.addClass(showClass);\r\n} else {\r\n$cloneNav.removeClass(showClass);\r\n}\r\n});\r\n});<\/code><\/pre>\n<\/div>\n
 <\/p>\n
\u53c2\u8003\u30b5\u30a4\u30c8<\/p>\n
jQuery\uff1a\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u305f\u3089\u30d8\u30c3\u30c0\u30fc\u3084\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u56fa\u5b9a\u30fb\u5909\u5316\u3055\u305b\u308b\u52d5\u304d\u3092\u5b9f\u88c5\u3059\u308b\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9 5<\/a><\/p><\/blockquote>\n
<\/pre>\n","protected":false},"excerpt":{"rendered":"
\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u305f\u3089\u3001\u30d8\u30c3\u30c0\u30fc\u306e\u30ca\u30d3\u304c\u3042\u3068\u304b\u3089\u30cb\u30e5\u3063\u3068\u51fa\u3066\u304f\u308b\u30b5\u30a4\u30c8\u3042\u308b\u3088\u306d\u3002\u305d\u308c\u3002 HTML <header> … <\/header> <nav> … <\/nav>  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2,4,8],"tags":[],"class_list":["post-187","post","type-post","status-publish","format-standard","hentry","category-html_css","category-js","category-useful"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/posts\/187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=187"}],"version-history":[{"count":5,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/posts\/187\/revisions"}],"predecessor-version":[{"id":592,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/posts\/187\/revisions\/592"}],"wp:attachment":[{"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}