指定した要素の子要素がついてくる「headerPersist」
当ページのリンクには広告が含まれています。
スポンサーリンク
指定した要素の子要素がついてくるjQueryプラグイン「headerPersist」を紹介します。
jQueryプラグイン「headerPersist」
このプラグインを使えば、指定した要素の子要素（例えば、見出しタグh1・h2・h3…など）がついてきます。もうちょっと詳しく説明すると、指定した要素の1階層下のはじめの要素がついてきます。指定した要素がクラスなどで複数ある場合には、ついてくる要素が切り替わるので、複数の見出しタグ（h2など）を含むページに便利です！
スポンサーリンク
管理人の下手くそな説明では……分かりづらいかもしれないので、デモで動作を確認してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Persistent Headerのデモでーす。">
<title>Persistent Header</title>
<style>
.content {
height: 1000px;
width: 600px;
margin: 20px 0;
border: 1px solid blue;
}
</style>
</head>
<body>
<h1>Persistent Headerのデモでーす。</h1>
<div class="content">
<h2>ついてくる 1</h2>
<ul>
<li>ついてこない</li>
<li>ついてこない</li>
<li>ついてこない</li>
</ul>
</div>
<div class="content">
<p>ついてくる 2</p>
<h4>ついてこない</h4>
<h3>ついてこない</h3>
<h2>ついてこない</h2>
</div>
<div class="content">
<h2>ついてくる 3</h2>
<p>ついてこない</p>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="jquery.headerPersist.1.0.js"></script>
<script>
$(function(){
$('.content').headerPersist();
});
</script>
</body>
</html>
スポンサーリンク