JQueryでスクロールするとついてくるサイドバーを実装する

最近、よく見かける感じのついてくるサイドバー。nanapiさんとかもサイドバーの広告がスクロールするとついてきますよね。

nanapi.jp

これって、JQueryのライブラリを使うと実装できるようです。

JavaScriptについては全く分からないんですが、ライブラリを使うことでゼロからコードを書くことは皆無なので、Google先生に聞けば大丈夫な感じです。

jQuery Ex Flex Fixedのダウンロード

こちらからダウンロードしました

d.hatena.ne.jp

ダウンロードファイルについて

jQuery Ex Flex Fixedのアーカイブをダウンロードして解凍すると、ファイルがたくさんありますが使うのはこの2つ。

  • jquery.exflexfixed-0.3.0.js
  • jquery-1.7.1.min.js

これをそのままサーバーにアップロードするか、MTとかWordPressのテンプレートとしてサーバーに生成します。

HTMLの記述、head要素

headタグの区間に下記のようなコードを記述します。script要素で参照するライブラリのファイルパスは相対パスでもよいですし、httpから始まる記述でも良いです。

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.exflexfixed-0.3.0.js"></script>
<script>
jQuery(function($){
$('div.scroll').exFlexFixed({
container : '#pagebody'
});
});
</script>

上記のコード中の div.scroll の箇所ですが、スクロールしたときについてきてほしい部分のHTMLが下記のような構成だった場合の記述です。

<div class="scroll">
(中略)
</div>

ここのclass属性が、side-contとかなら、head区間に記述した div.scroll は、div.side-cont となります。

次に container : '#pagebody' の部分ですが、div.scroll の親要素を記述します。2カラムのサイトだと、かなりざっくりですが、以下のようなHTMLを組んでいると思います。

<div id="container">

<div id="header">ヘッダー</div>

<div id="pagebody">
<div id="main">メイン</div>
<div id="side">サイドバー</div>
</div>

<div id="footer">フッター</div>

</div>

ついてきてほしいコンテンツはサイドバーに内包される形になるんですが、jQuery Ex Flex Fixedの場合、コンテンツ全体を囲む要素を指定すると良い感じです。

pagebodyがない場合は、 container : '#pagebody' を container : '#container' としても良いかと思います。

#を付けてpagebodyとか、containerと書くのはCSSと同様、HTML側でid属性として指定されているからです。

作業としては以上のような感じで、動作検証についてはブラウザで確認してください。

ポイントは、ファイルのアップロードができていることとhead区間に書いたコードが正確かどうかだけだと思います。