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

スクロール操作に追従して定位置に表示されるフロートパネルを簡単な記述で設置できる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用の回避策でスライド機能はなくなりますが、コンテンツは目的の場所に配置されます。

Portamentoのデモ

デモではデフォルトのシンプルなものから、マージンの設定や表示位置の限界線を設定するものまで実用的なものが揃っています。

デモのキャプチャ

デモ:シンプルなデフォルト

デモのキャプチャ

デモ:マージン有り

デモのキャプチャ

デモ:下に限界線あり

デモのキャプチャ

デモ:限界線あり、絶対位置

Portamentoの対応ブラウザ

対応ブラウザは下記の通りです。

  • IE7+
  • Firefox3+
  • Chrome4+
  • Safari4+(non-iOS)
  • Opera10+

IE7未満、iOSで利用する際はオプションの「disableWorkaround」を使用します。

sponsors

top of page

©2018 coliss