jQuery\u3067\u4f5c\u308b\u3001\u300e\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30d8\u30c3\u30c0\u30fc(Sticky header)\u300f<\/b>\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n
\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30d8\u30c3\u30c0\u30fc\u306f\u3001\u30b7\u30f3\u30d7\u30ebjQuery\u3067\u5b9f\u88c5\u3067\u304d\u3001\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u3082\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u898b\u5931\u3044\u307e\u305b\u3093<\/b>\u3002
\n\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3092\u30b9\u30c3\u30ad\u30ea\u3055\u305b\u3064\u3064\u3001\u8ff7\u5b50\u77e5\u3089\u305a\uff01<\/p>\n
Window\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u30a4\u30d9\u30f3\u30c8\u306b\u3088\u308b\u30af\u30e9\u30b9\u306e\u8131\u7740\u306e\u307f\u306e\u30b7\u30f3\u30d7\u30eb\u69cb\u9020\u3002
\n\u7279\u5b9a\u306e\u4f4d\u7f6e\u307e\u3067\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u305f\u3089\u30d8\u30c3\u30c0\u30fc\u306b\u30af\u30e9\u30b9\u3092\u3064\u3051\u3066CSS\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n
\u4eca\u56de\u306e\u30c7\u30e2\u3067\u306f\u3001CSS\u306b\u3061\u3087\u3063\u3074\u308a\u3072\u3068\u5de5\u592b\u3002
\n\u30d8\u30c3\u30c0\u30fc\u30e1\u30cb\u30e5\u30fc\u3092\u30d1\u30fc\u30bb\u30f3\u30c8\u8868\u793a\u306b\u3059\u308b\u3053\u3068\u3067\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u305c\u3072\u3042\u306a\u305f\u306e\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306b\u3082\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u304c\u4e0a\u90e8\u56fa\u5b9a\u3055\u308c\u308b\u300e\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30d8\u30c3\u30c0\u30fc\u300f<\/b>\u3092\u53d6\u308a\u5165\u308c\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u306d\uff01\uff01<\/p>\n
\n\u2193\u4ee5\u4e0b\u304c\u30b3\u30fc\u30c9\u30b5\u30f3\u30d7\u30eb\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u25bcjQuery<\/p>\n
<script type=\"text\/javascript\">\r\n$(function(){\r\n\tvar _window = $(window),\r\n\t\t_header = $('.site-header'),\r\n\t\thelloBottom;\r\n\t\r\n\t_window.on('scroll',function(){\t\t\r\n\t\thelloBottom = $('.hello').height();\r\n\t\tif(_window.scrollTop() > helloBottom){\r\n\t\t\t_header.addClass('fixed'); \r\n\t\t}\r\n\t\telse{\r\n\t\t\t_header.removeClass('fixed'); \r\n\t\t}\r\n\t});\r\n\t\r\n\t_window.trigger('scroll');\r\n});\r\n<\/script><\/pre>\n\u25bcCSS<\/p>\n
.site-header{\r\n\tbackground: #ffffff;\r\n\tdisplay: flex;\r\n\tpadding: 20px;\r\n\tposition: absolute;\r\n\tjustify-content: space-between;\r\n\twidth: 100%;\r\n}\r\n.site-header.fixed{\r\n\tposition: fixed;\r\n\ttop: 0;\r\n}\r\n.content{\r\n\tline-height: 1.6;\r\n\tmargin: 0 auto;\r\n\tpadding-top: 100px;\r\n\twidth: 800px;\r\n}\r\n\r\n@media screen and (max-width:750px) {\r\n .site-header{\r\n font-size: 80%;\r\n }\r\n .content{\r\n width: 90%;\r\n }\r\n}<\/pre>\n\u25bcHTML<\/p>\n
<div class=\"hello\">\r\n<img src=\"#\" width=\"1600\" height=\"1200\" alt=\"hello\">\r\n<\/div>\r\n <header class=\"site-header fixed\">\r\n\t\t<h1>\r\n <a href=\"#\">Home<\/a>\r\n <\/h1>\r\n\t\t<nav class=\"gnav\">\r\n\t\t\t<ul class=\"gnav_menu\">\r\n\t\t\t\t<li class=\"gnav_menu_tag\"><a href=\"#\">News<\/a><\/li>\r\n\t\t\t\t<li class=\"gnav_menu_tag\"><a href=\"#\">About<\/a><\/li>\r\n\t\t\t\t<li class=\"gnav_menu_tag\"><a href=\"#\">Service<\/a><\/li>\r\n\t\t\t\t<li class=\"gnav_menu_tag\"><a href=\"#\">SNS<\/a><\/li>\r\n\t\t\t\t<li class=\"gnav_menu_tag\"><a href=\"#\">Contact<\/a><\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/nav>\r\n\t<\/header>\t<\/pre>\n\u4eca\u56de\u3001\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u306e\u306f\u3001
\n\u30d8\u30c3\u30c0\u30fc\u30fb\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u56fa\u5b9a\u8868\u793a\u3055\u305b\u308b\u30a2\u30a4\u30c7\u30a25\u3064 – WEBDESIGNDAY<\/a>\u3055\u3093\u306e\u300eContents 3 \u9014\u4e2d\u304b\u3089\u56fa\u5b9a\u8868\u793a\u300f\u306e\u30da\u30fc\u30b8\u3067\u3059\u3002
\n\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002<\/p>\n