小粋空間  -  a cheap joke and a play on words site

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

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

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

Phusion Passenger users guide, Apache version

１．サンプル

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

サンプル

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

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

２．プラグインのダウンロード

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

jquery.displayheading_0.0.1.js

以下、設定方法です。

３．HTML

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

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

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

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

４．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()を実行します。

５．オプション

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

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

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

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

６．CSS

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

#header {
　  position: fixed;
    top:0;
    left:0;
    padding: 20px;
    width:100%;
    height: 30px;
    line-height: 2;
    background: #00f;
    color:#fff;
}