[JS]特定のエリアのみをスクロールしても同じ位置に表示するスクリプト

WebResourcesDepotのエントリーから、特定のエリアのみ（キャプチャの右のエリア）をスクロールしても、同じ場所に表示するスクリプトの紹介です。

Smart Floating Banners
デモ:1
デモ:2

スクリプトはjQueryをベースにしたもので、デモでは右に配置されたエリアの特定の一部のみをスクロールしても同じ場所に表示させています。

当サイトが配布している「Page Scroller（スムーズにスクロールするスクリプト）」と、同じ位置に表示するスクリプトの相性が悪い、というのをどこかのブログで見かけたのですが、これを使用すると特に問題無く実装できました。
Page Scrollerと合体させたデモ（「右パネルのtop」と「ページ下のtop」）

Page Scrollerは、「$」ではなく「$j」を使用なので、下記のように変更しています。

$j(document).ready(function(){
	$j(window).scroll(function(){
		if($j(window).scrollTop() > $j(".smartBannerIdentifier").offset({ scroll: false }).top){
			$j(".banner").css("position", "fixed");
			j(".banner").css("top", "0");
		}
		if($j(window).scrollTop() <= $j(".smartBannerIdentifier").offset({ scroll: false }).top){
			$j(".banner").css("position", "relative");
			$j(".banner").css("top", $j(".smartBannerIdentifier").offset);
		}
	});
});

Post on:2008年6月23日