[JS]Page Scrollerと他のjQueryプラグインとの実装サンプル

Post on:2009年2月23日

Smart Floating Banners

パネルがスクロールに追随して表示されます。
配布元：Smart Floating Banners

ユーザーのスクロール操作、Page Scrollerの挙動のスクロールにパネルが追随します。
パネル上の「Top of Page」は、Page Scrollerの挙動です。

Tips:: フロートするパネルは画像など実体がある方がベターです。
サンプルのようにスタイルシートの矩形の場合はwidth, heightなどしっかり指定します。

脚注を抽出し指定箇所に配置します。相互リンクは自動生成。
配布元：jQuery Footnotes

span内のテキスト、blockquoteのtitle内のテキストを抽出し、指定箇所にリスト要素でナンバリングして脚注を配置します。
脚注に戻るリンクもありますが、デフォルトだと視認性が低いと思います。

Tips:: 外部スクリプトの記述の順番は、jFootnotesの後に、Page Scrollerを記述してください。
リンクの生成後でないと、Page Scrollerは動作しません。

同じようなモーションで動作するパンくず。
配布元：jBreadCrumb

スクリプト同士に協力している箇所はありませんが、一緒に設置すると動作しなかったため、Page Scrollerを修正しました。

Tips:: jBreadCrumbの実装には、下の空divを忘れないように。; 追記：
jBreadCrumbの外部ファイルの記述の順番は、スタイルシートの後にスクリプトを記述しないとOpera, Safariで動作しませんでした。