[JS]特定のエリアのみをスクロールしても同じ位置に表示するスクリプト
Post on:2008年6月23日
WebResourcesDepotのエントリーから、特定のエリアのみ(キャプチャの右のエリア)をスクロールしても、同じ場所に表示するスクリプトの紹介です。
Smart Floating Banners
デモ:1
デモ:2
スクリプトはjQueryをベースにしたもので、デモでは右に配置されたエリアの特定の一部のみをスクロールしても同じ場所に表示させています。
当サイトが配布している「Page Scroller(スムーズにスクロールするスクリプト)」と、同じ位置に表示するスクリプトの相性が悪い、というのをどこかのブログで見かけたのですが、これを使用すると特に問題無く実装できました。
Page Scrollerと合体させたデモ(「右パネルのtop」と「ページ下のtop」)
Page Scrollerは、「$」ではなく「$j」を使用なので、下記のように変更しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<textarea name="code" class="js" cols="60" rows="5"> $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); } }); }); </textarea> |
sponsors