今日の人気記事

まだデータがありません。

指定した要素の子要素がついてくる「headerPersist」

スポンサーリンク

指定した要素の子要素がついてくるjQueryプラグイン「headerPersist」を紹介します。

jQueryプラグイン「headerPersist」

このプラグインを使えば、指定した要素の子要素(例えば、見出しタグh1・h2・h3…など)がついてきます。もうちょっと詳しく説明すると、指定した要素の1階層下のはじめの要素がついてきます。指定した要素がクラスなどで複数ある場合には、ついてくる要素が切り替わるので、複数の見出しタグ(h2など)を含むページに便利です!

スポンサーリンク

管理人の下手くそな説明では……分かりづらいかもしれないので、デモで動作を確認してみてください。

「headerPersist」のデモ

デモのソース(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>
スポンサーリンク

関連記事(一部広告含む)