[JS]追従するフロートパネルを一行のスクリプトで設置できる -Portamento

サイト構築 -JavaScript

Post on:2011年9月27日

sponsorsr

スクロール操作に追従して定位置に表示されるフロートパネルを簡単な記述で設置できるjQueryのプラグインを紹介します。

Portamento - easy slidingfloating panels in jQuery

[ad#ad-2]

Portamentoの実装

実装は非常に簡単です。

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="portamento.js"></script>

HTML

フロートさせるパネルをdiv要素で実装します。

<div id="panel">パネル</div>

JavaScript

jQueryのセレクタでパネルを指定し、スクリプトを実行します。

<script>
$('#panel').portamento();	
</script>

CSS

Portamentoはパネルを内包するエレメントに「id=portamento_container」を割り当てるため、下記のスタイルシートを用意します。

#portamento_container {
	float:right; 
	position:relative;
}

#portamento_container #panel {
	float:none; 
	position:absolute;
}

#portamento_container #panel.fixed {
	position:fixed;
}

[ad#ad-2]

スクリプトのオプション

Portamentoをカスタマイズできるオプションは3つです。

wrapper: 追従させるパネルを内包するエレメント。
パネルはこのエレメントから外には配置されず、そのエレメントのpaddingも有効です。; デフォルトは「<body>」
gap: ビューポートのトップとパネルのトップの間隔で、単位はピクセルです。; デフォルトは「10」
disableWorkaround: 非対応ブラウザ用のオプション。
IE7未満、iOS用の回避策でスライド機能はなくなりますが、コンテンツは目的の場所に配置されます。