スクロール時に表示位置を固定するjQueryプラグイン『FixedScroll』を作成しました
今さら感は否めないですが、スクロール時に表示位置を固定するjQueryプラグインを作成しました。
Webサイト制作時にこの機能が必要だったのですが、既存のプラグインだと細かい点でうまく行かなかったので（&JavaScriptのリハビリも兼ねて）。
このプラグインの使い方等について書くので、気に入った方はぜひご利用ください。
動作環境
動作確認を行なっている環境は、次の通りです。 IEを除く各ブラウザのバージョンは、執筆時での最新のものです。
| OS | ブラウザ |
|---|---|
| Mac | Chrome, Firefox, Safari |
| Windows | Chrome, Firefox, IE7〜10 |
IE6には対応していません。 が、閲覧できなくなる訳ではないのでご安心ください（投げやり）。
デモ
まずはデモをどうぞ。
デモを見てもらっても分かると思いますが、機能自体はもの凄くシンプルです。 プラグインの作成が目的ではなく、Webサイト制作中に書いたコードをjQuery用プラグインとしてまとめただけなので、必要最小限の機能しかありません。
ただ、シンプルが故に使いやすくはあると思います。
使い方
使い方は次の通りです。
- jQueryを読み込む
- FixedScrollを読み込む
- 動作用のJavaScriptコードを記述する（数行程度）
- CSSを設定する
基本的な使い方はGitHubあるいはデモのソースコードを見てもらった方が早いかも知れません。
1. jQueryを読み込む
FixedScrollはjQueryプラグインなので、まずjQueryを読み込んでください。
jQueryのバージョンは1.2.6以上のもので動作を確認できています（〜1.2.5では.scrollTop()に非対応なため動作せず）。
<script type="text/javascript" src="js/jquery.js"></script>
2. FixedScrollを読み込む
jQueryより下でFixedScrollを読み込んでください。
<script type="text/javascript" src="js/jquery.FixedScroll.js"></script>
3. 動作用のJavaScriptコードを記述する（数行程度）
次に、表示位置を固定したい要素のIDまたはクラスを指定してください。 オプション（引数）は指定しなくても動作します。
$(function() {
$('#Navigation').FixedScroll();
});
4. CSSを設定する
表示位置を固定する要素を#Navigation、親ボックスを#Mainとする場合、デモでは以下のように設定しています。
#Main
{
overflow: hidden;
position: relative;
background: #EEEEEE;
}
#Navigation
{
position: absolute;
top: 20px;
width: 160px;
margin: 0px 0px 0px 620px;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
このように、まず親ボックスにはposition:relative、位置を固定する要素にはposition:absoluteを指定してください。 その上で、topやwidth、margin等で位置や大きさを調整してください。
以上で設定は完了となります。
オプション
オプション機能として、ページ下部にある任意の要素と重ならないように設定可能です。
例えば、id:Footerと20pxの余白をを取りたい場合は次のように指定します。
$(function() {
$('#Navigation').FixedScroll({
avoid: '#Footer',
margin: 20
});
});
デモでこの指定がされていますので、動作を確認してみてください。
おわりに
UIの話になりますが、ユーザにとって要素の位置を固定した方がいい場合もあれば、もちろん悪い場合もあります。 固定した方がいいと判断した場合は、ぜひこのプラグインでUI向上に役立ててみてください。
また、プラグインのご指摘等もお待ちしております！
