[JS]使い勝手のよい、パネルをスクロールに追従させるスクリプト -Sticky Sidebar

複数のパネルの配置にも対応、表示位置の設定も簡単に行え、アニメーションのスピードやエフェクトも変更できる、ページをスクロールした際に指定したエレメントをアニメーションで定位置に移動するjQueryのプラグインを紹介します。

Sticky Sidebar jQuery plugin
Sticky Slidebar -GitHub

[ad#ad-2]

• Sticky Sidebarのデモ
• Sticky Sidebarの使い方

Sticky Sidebarのデモ

まずは、オーソドックスなデモからご紹介。

Demo 1

ページをスクロールすると、右のパネルが常に上部に表示されます。

Demo 1をスクロールしたキャプチャ

[ad#ad-2]

続いて、Sticky Sidebarの機能がよく分かるデモです。
追従するパネルは3つ用意されており、それぞれ移動エリアが異なります。

Demo 2

赤枠のナビゲーションは左のカラム内の移動、黒枠のパネルは黒枠内のみ、右のバスケットはページ内全てです。
また、中央のテキスト「Remove」をクリックすると、一時的にそのパネルだけ追従をやめます。

Sticky Sidebarの使い方

オーソドックスなデモを例に実装方法を紹介します。

外部ファイル

スクリプトを外部ファイルとして記述します。

<script src="jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="stickysidebar.jquery.js"></script>

HTML

ページは2カラムで、サイドバーにパネルをdiv要素で実装します。

<div id="main">コンテンツ</div>
<div id="side">
	<div id="basket">パネル</div>
</div>

JavaScript

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

<script>
$('#basket').stickySidebar();
</script>

スクリプトのオプション

オプションではアニメーションの種類やスピード、パネルの表示位置を設定できます。

speed

アニメーションのスピード

easing

アニメーションのタイプ

padding

最上部のスペース

constrain

親要素外のスクロール

オプションを使用すると、下記のようになります。

<script>
$('.stickbox').stickySidebar({
	speed: 400, padding: 30, constrain: true
})
</script>