2010/03/26ブラウザのスクロールについてくるサイドメニューを見かけますよね。今回、ある案件でjQueryを使ってそれを実装する機会がありました。複数サイトからのスクリプトダウンロードなど、少し煩雑だったのでメモを残しておきます。必要なライブラリをダウンロードします。1.3.2」を以下の公式サイトからダウンロードします。1.7.2」を以下の公式サイトからダウンロードします。http://jqueryui.com/ダウンロードしたファイルにはいくつものjsを含んでいると思いますが、使用するのは「ui.core.js」のみです。0.4.0」を以下のサイトからダウンロードします。http://kitchen.net-perspective.com/open-source/scroll-follow/バージョンは絶対ではないので、他のバージョンでも動作すると思います。今回の実装には上記のバージョンで動作を確認しました。次に、該当のhtmlファイルで、ダウンロードしたjsファイルを読み込みます。その下に、ついてくるメニューの要素をjQueryで指定します。以下の例では、「id=”Side”」を指定した要素をスクロールについてこさせます。$('#Side').scrollFollow();});</script>基本的にはこれで完了です。その他にオプションを指定することもできます。以下のようにすればメニュー要素がスクロールについて移動しても、ブラウザの枠からの位置をキープすることができます。50});});</script>その他にもいろいろとオプションを指定できますが、詳細は公式サイトなどを参照してください。ここで、基本的にはこれで問題ないはずですが、私の場合は動きませんでした。調べてみたところ、「id=”Side”」にpositioinの指定を追加することで解決しました。relative;width:200px;}floatを指定していたからでしょうか。コーディングの条件に応じては、若干の調整は必要なようです。本書は、実践で即役立つテクニックと開発ノウハウ、つまづきやすい・ハマりやすいポイントを徹底解説した「JavaScriptを利用するWebプログラマ必携の逆引き集」です。JavaScript(ECMAScript)の基本構文や新記法といった基礎的な知識から、オブジェクト指向、組み込みオブジェクト、関数、オブジェクト指向構文、DOM、ブラウザーオブジェクトなどの定石・応用テクニック、開発に役立つツール類まで、著者の経験に基づいた実践の場で必ず役立つノウハウ、レシピを提供します。JavaScriptをいまいち使いこなせていないと感じる方や中級レベルに向けてしっかり足場固めをしたい方、JavaScriptをもっと活用したい方などにおすすめの一冊です。アスキー・メディアワークスWeb制作に必要なjQueryの使い方を効率よくしっかり学べる。2.0など最新のトレンドにも対応。サンプルを100本超提供。1.9対応特製チートシート付き。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。