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

jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグイン

jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグインを公開します。

このプラグインは、下記のサイトで紹介されているサンプルをプラグイン化し、機能を追加したものです。

PersistentHeaders

１．サンプル

サンプルを用意しました。スクロールすると各コンテンツのヘッダー部分がページ上部に固定されます。また、ヘッダーを含んだコンテンツがページから消えると固定されていたヘッダーも消えます。

サンプル

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

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

jquery.persistentheaders_0.0.1.js

jquery.persistentheaders_0.0.2.js

以下、設定方法です。

３．HTML

HTMLを次のように記述します。

<div class="persist-area">
   <h1 class="persist-header">ヘッダー</h1>
   <!-- コンテンツを記述 -->
</div>

固定したい部分の要素にclass属性「persist-header」を設定し、コンテンツを含む全体の要素にclass属性「persist-area」を設定します。

「persist-area」の要素がページ上部にさしかかると、「persist-header」の要素がページ上部に固定されます。また、「persist-area」の内容がページ上部に消えると「persist-header」の内容も消えます。

1ページ内に複数のclass属性を設定すれば、冒頭のサンプルのような動作になります。

４．JavaScript

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

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

オプションとして以下を用意しています。

• areaName：コンテンツのclass属性値。デフォルトは「persist-area」
• headerName：固定する要素のclass属性値。デフォルトは「persist-header」
• slideUpSpeed：固定する要素をスライドアップで表示するときの速度。デフォルトは「0」
• slideDownSpeed：固定する要素をスライドダウンで表示するときの速度。デフォルトは「0」
• idHidden：固定した要素を消したくない場合は「false」または「0」を設定。デフォルトは「true」。ナビゲーションなど、ページの最後まで常に表示しておきたい場合に利用します

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

jQuery(function() {
    jQuery('#foo').persistentHeaders({
        areaName: 'foo',
        headerName: 'bar',
        slideUpSpeed: 300,
        slideDownSpeed: 50,
        idHidden: false
    });
});

５．CSS

以下のCSSをページに追加してください。

.floatingHeader {
    position: fixed;
    top: 0;
    visibility: hidden;
}

６．要素を上部に固定する仕組み

ページをロードしたときにclass属性値「persist-area」の要素を探し、その中にあるclass属性値「persist-header」のクローンを作成し、元の要素の直前に追加すると同時に、CSSで非表示にします。

スクロールを行うと、scroll()イベントでclass属性値「persist-area」の要素を検索し、スクロール位置・要素のオフセット・要素の高さを計算し、その差分で動作を決定します。

2012.09.10
v0.0.2を公開しました。