\u30da\u30fc\u30b8\u9014\u4e2d\u3067\u51fa\u3066\u304f\u308b\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3<\/b>\u304c\u3001\u30b9\u30af\u30ed\u30fc\u30eb<\/b>\u3057\u3066\u753b\u9762\u306e\u4e00\u756a\u4e0a\u306b\u6765\u308b\u3068<\/p>\n
\u56fa\u5b9a<\/b>\u3055\u308c\u3066\u4ee5\u964d\u305a\u3063\u3068\u3064\u3044\u3066\u304d\u307e\u3059\u3002<\/p>\n
\u4eca\u56de\u306f\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3<\/b>\u3067\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u30b9\u30af\u30ed\u30fc\u30eb<\/b>\u3057\u3066\u8981\u7d20\u304c\u753b\u9762\u306e<\/p>\n
\u4e00\u756a\u4e0a\u306e\u4f4d\u7f6e\u306b\u6765\u305f\u6642\u306b\u56fa\u5b9a<\/b>\u3055\u308c\u308b\u306e\u3067\u3001\u30b5\u30a4\u30c9\u30d0\u30fc<\/b>\u306a\u3069\u306b\u3082\u4f7f\u3048\u307e\u3059\u3002<\/p>\n
\n \u25bc\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n
<script type=\"text\/javascript\" src=\"js\/jquery-1.4.2.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n\r\n$(function($) {\r\n \r\n\tvar nav = $('.nav'),\r\n \t\toffset = nav.offset();\r\n \r\n\t$(window).scroll(function () {\r\n \t\t if($(window).scrollTop() > offset.top) {\r\n \t\t nav.addClass('fixed');\r\n \t\t } else {\r\n \t\t nav.removeClass('fixed');\r\n \t\t }\r\n\t});\r\n});\r\n\r\n\r\n<\/script><\/pre>\n\u25bcCSS<\/p>\n
<style type=\"text\/css\">\r\nbody, div, p, ul, li, h1, h2, h3, h4, h5, h6, embed, object {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}\r\nbody {\r\n\tbackground-color: #CCF;\r\n\tfont: 100% Arial, Helvetica, sans-serif;\r\n}\r\nh1 {\r\n\tfont-size: 200%;\r\n\ttext-align: center;\r\n\tpadding: 20px;\r\n\theight: 100px;\r\n}\r\n.clearfix:before, .clearfix:after {\r\n\tcontent:\"\";\r\n\tdisplay:table;\r\n}\r\n.clearfix:after {\r\n\tclear:both;\r\n}\r\n#content {\r\n\tbackground: #fff;\r\n\theight: 1000px;\r\n\tmargin: 0 auto 60px;\r\n\twidth: 780px;\r\n}\r\n.nav {\r\n\tmargin: 0 auto;\r\n\twidth: 780px;\r\n\tbackground-color: #bbb;\r\n}\r\n.nav li {\r\n\tlist-style: none;\r\n\tfloat: left;\r\n}\r\n.nav li a {\r\n\ttext-decoration: none;\r\n\tcolor: #fff;\r\n\tpadding: 10px 20px;\r\n\tdisplay: block;\r\n}\r\n.nav li a:hover {\r\n\tbackground: #aaa;\r\n}\r\n.fixed {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n}\r\np{\r\n\ttext-align: center;\r\n\tpadding-top: 350px;\r\n\tfont-weight: bold;\r\n\tfont-size: 36px;\r\n}\r\n<\/style><\/pre>\n\u25bcHTML<\/p>\n
<div id=\"content\">\r\n<div class=\"nav\">\r\n <ul class=\"clearfix\">\r\n <li><a href=\"#\">MENU<\/a><\/li>\r\n <li><a href=\"#\">MENU<\/a><\/li>\r\n <li><a href=\"#\">MENU<\/a><\/li>\r\n <li><a href=\"#\">MENU<\/a><\/li>\r\n <\/ul>\r\n<\/div>\r\n <p>sample<\/p>\r\n<\/div><\/pre>\n\u4eca\u56de\u3001\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u306e\u306f\u3001
\n\u300e\u30da\u30fc\u30b8\u9014\u4e2d\u306b\u3042\u308b\u30b0\u30ed\u30fc\u30d0\u30eb\u30ca\u30d3\u306a\u3069\u3092\u30b9\u30af\u30ed\u30fc\u30eb\u6642\u306b\u30c8\u30c3\u30d7\u306b\u56fa\u5b9a\u3059\u308bjQuery – WPC<\/a>\u300f\u3055\u3093\u3067\u3059\u3002
\n\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002<\/p>\n