Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

ブラウザスクロールに連動するサイドバー

Dec062009
Vote:
http://bizcaz.com/archives/2009/12/06-024212.php
Categories: jQuery
Tags: jQuery, ScrollingSidebar
Social Bookmark

Prev Page: かんたんスターレーティング( jquery.sexyvote.js )

こんばんわ^^

以前にも同様のスクリプトをご紹介したことがあります。

Wrap Scroll / ブラウザースクロールと連動するサイドバー

今回ご紹介するのは jQuery を使ったものです。

サンプルを表示できませんでした。

上記は以下のページから入手することができます。

Scroll/Follow Sidebar, Multiple Techniques | CSS-Tricks

使い方

ブラウザスクロールに連動してサイドバーを連動させるには以下のコードで実現してます。

連動スクロール

<script type="text/javascript">
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("##sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("##sidebar").stop().animate({
marginTop: 0
});
};
});
});
</script>

赤字の部分がスクロールに連動して移動させたいコンテナ ID になります。
ご使用のテンプレートに合わせて変更することになるかと。そして、HTML は以下のようになります。

連動スクロール / HTML

<div id="page-wrap">
<div id="main">
メインコンテンツ
</div>
<div id="sidebar">
サイドバーのコンテンツ
</div>
</div>

大まかには上記のような構造にする必要があります。
そしてもっとも重要な CSS を以下のようにスタイルすることで完了です。

連動スクロール / CSS

#page-wrap {
width: 600px;
margin: 15px auto;
}
#main {
width: 390px;
float: left;
}
#sidebar {
width: 190px;
float: right;
}

上記では page-wrap の横幅を赤字のように 600px としてます。
それに伴って main の横幅 390px( 青字 )と sidebar の横幅 190px( 緑字 )を足した合計が 600px 以内に収まるようにサイズ指定してます。
この合計が赤字の横幅を超えるようだと期待する動作をしませんのでご注意ください。

以上です。
お試しあれぇ。