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

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

Posted at March 27,2012 1:55 AM
Tag:[jQuery, PersistentHeaders, Plugin]

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

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

PersistentHeaders
PersistentHeaders

1.サンプル

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

サンプル
サンプル

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

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

jquery.persistentheaders_0.0.1.js
jquery.persistentheaders_0.0.2.js

以下、設定方法です。

3.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属性を設定すれば、冒頭のサンプルのような動作になります。

4.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
    });
});

5.CSS

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

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

6.要素を上部に固定する仕組み

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

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

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


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

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

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

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