TopJavaScriptjQueryプラグイン > 2012年3月
2012年3月27日

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

March 27,2012 1:55 AM
Tag:[, , ]
Permalink

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を公開しました。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3