jQueryでヘッダーに現在の見出し要素を表示する「DisplayHeadingプラグイン」

jQueryでヘッダーに現在の見出し要素を表示する「DisplayHeadingプラグイン」

Posted at October 1,2013 12:55 AM
Tag:[DisplayHeading, jQuery, Plugin]

jQueryでヘッダー部分に現在の見出し要素を表示する「DisplayHeadingプラグイン」を公開します。

このプラグインは以下のページの振舞いに触発されて作りました。

Phusion Passenger users guide, Apache version

1.サンプル

サンプルを用意しました。

サンプル
サンプル

スクロールして見出し要素が通過するたびにページ上部のヘッダー部分に見出しのタイトルを表示します。

逆スクロールしても、同じように見出しのタイトルを遡って表示します。

2.プラグインのダウンロード

下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.displayheading.js」にリネームしてください。

jquery.displayheading_0.0.1.js

以下、設定方法です。

3.HTML

見出しの内容を表示させたいHTMLを、body終了タグの直前等に次のように記述します。

<div id="header"></div>

id属性値には「header」を設定します。HTML要素は何でも使えると思います。

この要素をページ上部にヘッダーとして表示し、ページ内の見出し要素(h1~h6)がヘッダーにさしかかると、その見出し要素の内容をヘッダー部分に表示します。

4.JavaScript

JavaScriptは次のように記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.displayHeading.js"></script>
<script>
jQuery(function() {
    jQuery('#foo').displayHeading();
});
</script>

見出し要素を含む親要素に対してdisplayHeading()を実行します。

5.オプション

displayHeading()を実行時のオプションとして下記を用意しています。

  • headerName:ヘッダー要素のid属性値。デフォルトは「header」

オプションは次のように設定してください。

jQuery(function() {
    jQuery('#foo').displayHeading({
        headerName: 'foo'
    });
});

6.CSS

表示させるヘッダーに対し、CSSを適宜設定してください。上の3つのプロパティは必須です。

#header {
   position: fixed;
    top:0;
    left:0;
    padding: 20px;
    width:100%;
    height: 30px;
    line-height: 2;
    background: #00f;
    color:#fff;
}
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)