スティッキーヘッダー2【jQuery】
前回の投稿のスティッキーヘッダーをいじりました。
中央に設定されているヘッダーをスクロールすると小さめのヘッダーが上部から固定されます。
## html
</head>
<body>
<header class="page-header" role="banner">
<div class="inner clearfix">
<h1 class="site-logo">mutumi</a></h1>
<nav class="primary-nav" role="navigation">
<ul>
<li><a href="./">About</a></li>
<li><a href="./">Work</a></li>
<li><a href="./">Blog</a></li>
<li><a href="./">Recruit</a></li>
<li><a href="./">Contact</a></li>
</ul>
</nav>
</div>
</header＞## css
html { font-family: sans-serif; font-size: 16px; line-height: 1.5; }
body { background-color: rgb(240, 240, 240); color: rgb(0, 0, 0); min-width: 960px; padding-top: 240px; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding-left: 0; }
ul li { list-style-type: none; }
a { color: inherit; text-decoration: none; }
img { vertical-align: middle; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.dummy { margin: 0 auto; max-width: 32em; padding: 2em 0; }
.page-header {
background-color: rgb(255, 255, 255);
width: 100%;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.no-boxshadow .page-header {
border-bottom: 1px solid rgb(204, 204, 204);
}
.page-header > .inner {
margin: auto;
width: 960px;
}
/* Logo */
.site-logo {
font-size: 2.5rem;
float: left;
margin-left: 20px;
}
.primary-nav {
float: right;
line-height: 65px;
letter-spacing: 1px;
text-transform: uppercase;
}
.primary-nav li {
float: left;
}
.primary-nav a {
display: block;
padding: 0 1.36em;
}
.primary-nav a:hover {
background-color: rgb(240, 240, 240);
}
.page-header-clone {
background-color: rgb(0, 0, 0);
opacity: 0.9;
position: fixed;
top: -60px;
width: 100%;
/*z-index: 30;*/
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-webkit-transition: top 0.25s;
transition: top 0.25s;
}
.page-header-clone > .inner {
margin: auto;
width: 960px;
}
.page-header-clone.visible {
top: 0;
}
.page-header-clone:hover {
opacity: 1;
}
.page-header-clone .site-logo {
margin-left: 8px;
color: #fff;
}
.page-header-clone .site-logo a {
display: block;
width: 143px;
height: 32px;
overflow: hidden;
}
.page-header-clone .site-logo a:before {
display: inline-block;
}
.page-header-clone .primary-nav {
font-size: 14px;
line-height: 60px;
}
.page-header-clone .primary-nav a {
color: rgb(128, 128, 128);
}## js
$(function() {
var $window = $(window),
// window をオブジェクト化
$header = $('.page-header'),
// .page-header の取得
$headerClone = $header.contents().clone();
// $headerの子要素をcontents()で取得。clone()でコピー
$headerCloneContainer = $('<div class="page-header-clone"></div>'),
// 入れ物を作成
threshold = $header.offset().top + $header.outerHeight();
// ヘッダー上辺の位置とヘッダーそのもの高さを取得
$headerCloneContainer.append($headerClone).appendTo('body');
// 入れ物にクローンを挿入し、bodyに戻り値を挿入
$window.on('scroll', $.throttle(1000 / 15, function() {
// windowがスクロールした際に発火
// throttleにてイベントハンドラを制限
if ($window.scrollTop() > threshold) {
// windowのトップがヘッダーの位置＋高さを超えた際に発火
$headerCloneContainer.addClass('visible');
// classを追加
} else {
$headerCloneContainer.removeClass('visible');
// classを削除
}
}));
$window.trigger('scroll');
})勉強になったこと
scrollTop();
指定して要素の上辺位置を取得する
trigger();
イベントを任意で発火できるhttp://semooh.jp/jquery/api/events/trigger/type%2C+%5Bdata%5D/
outerHeight();
指定した要素の高さ(height)を取得する。border, paddingも含まれる。引数にtrueを渡すと、marginの値も含まれる。
appendTo();
append(）は引数が挿入するものを記載するが、appendTo()は挿入される側を記載する。appendとappendToは戻り値が異なる。
http://sato-ja.blogspot.com/2010/01/jqueryappendappendto.html
throttling()
jQueryのplugin
イベントハンドラを制限します。resizeやscrollでは、イベントの発生時に永続的に処理されており負担がかかる。
https://memocarilog.info/jquery/7203